vue 403 Invalid CORS request

引用: CORS (Cross-Origin Resource Sharing)是一种浏览器的安全策略，用于控制跨域资源的访问。当浏览器发起跨域请求时，如果目标资源的响应头没有包含正确的CORS策略，浏览器会阻止该请求。错误信息"Access to XMLHttpRequest at 'http://10.1.1.1:8080/web-api/login' from origin 'http://xxx.com' has been blocked by CORS policy"提示你的请求被CORS策略拦截了。

引用: 出现这个错误的原因可能是你的代码中使用了写死的接口请求地址，并且该地址不是相对路径，而是绝对路径。为了避免CORS错误，你需要将这些写死的地址改为相对路径的方式，例如改为“/web-api/xxx”。

引用: 如果你的代码是基于Vue框架开发的，可以在配置文件（比如webpack配置文件）中设置API_ROOT为相对路径。例如，将API_ROOT设置为空字符串，HOST设置为"localhost"。

解决CORS错误的关键是确保请求的源和目标资源在同一个域下，或者目标资源的响应头包含了适当的CORS策略。请根据上述引用内容中提供的方法尝试解决你的问题。

相关问题

Vue应用请求SpringBoot API出现 CORS 跨域请求设置 Invalid CORS request错误

这个错误是因为浏览器的同源策略所导致的，同源策略要求请求的协议、域名、端口号必须全部匹配，否则就会出现跨域问题。

要解决这个问题，有两种方法：

1. 在 SpringBoot 中配置 CORS。在 SpringBoot 的配置文件中，可以添加如下配置：

   @Configuration
   public class CorsConfig {
       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurer() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**")
                           .allowedOrigins("*")
                           .allowedMethods("*")
                           .allowedHeaders("*");
               }
           };
       }
   }

这段代码表示允许所有来源（`allowedOrigins("*")`）、所有方法（`allowedMethods("*")`）和所有请求头（`allowedHeaders("*")`）的跨域请求。

2. 在 Vue 应用中使用代理。在 Vue 应用的 `config/index.js` 文件中，可以添加如下配置：

   module.exports = {
     dev: {
       proxyTable: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true,
           pathRewrite: {
             '^/api': '/api'
           }
         }
       }
     }
   }

这段代码表示将所有以 `/api` 开头的请求代理到 `http://localhost:8080`，并开启跨域请求支持（`changeOrigin: true`）。在 Vue 应用中，请求的 URL 可以写成 `/api/xxx` 的形式，这样就会被代理到目标服务器。

实例： vue3 用store保存登录用户信息 前台用vue3 后台Springboot 假设有一个users表，用security来判定，工具前后端都使用idea

好的，下面是一个简单的实例，演示如何使用Vue3和Spring Boot来实现用户登录和保存用户信息到Vuex store中。

前端部分：

1. 创建Vue3项目并安装Vuex库：

vue create myproject
cd myproject
npm install vuex --save

2. 在src目录下创建store目录，并新建一个index.js文件来定义和导出Vuex store：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    clearUser(state) {
      state.user = null
    }
  },
  actions: {
    login({ commit }, user) {
      // Send login request to the backend
      // ...
      // If login succeeds, commit the user to the store
      commit('setUser', user)
    },
    logout({ commit }) {
      // Send logout request to the backend
      // ...
      // If logout succeeds, clear the user in the store
      commit('clearUser')
    }
  },
  getters: {
    isLoggedIn(state) {
      return !!state.user
    },
    getUser(state) {
      return state.user
    }
  }
})

export default store

3. 在main.js中导入store并挂载到Vue实例中：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

4. 在登录页面中创建一个表单来输入用户名和密码，并将其提交到Vuex store中：

<template>
  <form @submit.prevent="login">
    <input v-model="username" placeholder="Username">
    <input v-model="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapActions(['login']),
    onSubmit() {
      this.login({ username: this.username, password: this.password })
    }
  }
}
</script>

5. 在需要访问用户信息的组件中，使用Vuex的mapGetters函数来获取用户信息：

<template>
  <div v-if="isLoggedIn">
    Logged in as: {{ username }}
    <button @click="logout">Logout</button>
  </div>
  <div v-else>
    Not logged in
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['isLoggedIn', 'getUser']),
    username() {
      return this.getUser.username
    }
  },
  methods: {
    ...mapActions(['logout'])
  }
}
</script>

后端部分：

1. 使用Spring Boot创建一个RESTful API，用于处理用户登录和注销请求：

@RestController
@RequestMapping("/api/auth")
public class AuthController {
  
  @Autowired
  private AuthenticationManager authenticationManager;

  @Autowired
  private JwtTokenProvider tokenProvider;

  @Autowired
  private UserRepository userRepository;

  @PostMapping("/login")
  public ResponseEntity<?> authenticateUser(@Valid @RequestBody LoginRequest loginRequest) {

    Authentication authentication = authenticationManager.authenticate(
            new UsernamePasswordAuthenticationToken(
                    loginRequest.getUsernameOrEmail(),
                    loginRequest.getPassword()
            )
    );

    SecurityContextHolder.getContext().setAuthentication(authentication);

    String jwt = tokenProvider.generateToken(authentication);
    return ResponseEntity.ok(new JwtAuthenticationResponse(jwt));
  }

  @PostMapping("/logout")
  public ResponseEntity<?> logoutUser(HttpServletRequest request) {
    // Invalidate session and clear authentication token
    HttpSession session = request.getSession(false);
    if (session != null) {
      session.invalidate();
    }
    SecurityContextHolder.clearContext();
    return ResponseEntity.ok(new ApiResponse(true, "Successfully logged out"));
  }
}

2. 创建一个User实体类，并创建一个UserRepository接口来访问users表：

@Entity
@Table(name = "users")
public class User extends DateAudit {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  @NotBlank
  @Size(max = 40)
  private String name;

  @NotBlank
  @Size(max = 15)
  private String username;

  @NaturalId
  @NotBlank
  @Size(max = 40)
  @Email
  private String email;

  @NotBlank
  @Size(max = 100)
  private String password;

  // getters and setters
}

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
  Optional<User> findByEmail(String email);
  Boolean existsByEmail(String email);
}

3. 使用Spring Security来保护API，并使用JwtTokenProvider类来生成和验证JWT：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(
        prePostEnabled = true,
        securedEnabled = true,
        jsr250Enabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  @Autowired
  private CustomUserDetailsService customUserDetailsService;

  @Autowired
  private JwtAuthenticationEntryPoint unauthorizedHandler;

  @Bean
  public JwtAuthenticationFilter jwtAuthenticationFilter() {
    return new JwtAuthenticationFilter();
  }

  @Override
  public void configure(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
    authenticationManagerBuilder
            .userDetailsService(customUserDetailsService)
            .passwordEncoder(passwordEncoder());
  }

  @Bean
  public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
  }

  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http
            .cors()
                .and()
            .csrf()
                .disable()
            .exceptionHandling()
                .authenticationEntryPoint(unauthorizedHandler)
                .and()
            .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
            .authorizeRequests()
                .antMatchers("/api/auth/**")
                    .permitAll()
                .anyRequest()
                    .authenticated();

    // Add JwtAuthenticationFilter
    http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
  }
}

@Component
public class JwtTokenProvider {
  private static final Logger logger = LoggerFactory.getLogger(JwtTokenProvider.class);

  @Value("${app.jwtSecret}")
  private String jwtSecret;

  @Value("${app.jwtExpirationInMs}")
  private int jwtExpirationInMs;

  public String generateToken(Authentication authentication) {

    UserPrincipal userPrincipal = (UserPrincipal) authentication.getPrincipal();

    Date now = new Date();
    Date expiryDate = new Date(now.getTime() + jwtExpirationInMs);

    return Jwts.builder()
            .setSubject(Long.toString(userPrincipal.getId()))
            .setIssuedAt(new Date())
            .setExpiration(expiryDate)
            .signWith(SignatureAlgorithm.HS512, jwtSecret)
            .compact();
  }

  public Long getUserIdFromJWT(String token) {
    Claims claims = Jwts.parser()
            .setSigningKey(jwtSecret)
            .parseClaimsJws(token)
            .getBody();

    return Long.parseLong(claims.getSubject());
  }

  public boolean validateToken(String authToken) {
    try {
      Jwts.parser().setSigningKey(jwtSecret).parseClaimsJws(authToken);
      return true;
    } catch (SignatureException ex) {
      logger.error("Invalid JWT signature");
    } catch (MalformedJwtException ex) {
      logger.error("Invalid JWT token");
    } catch (ExpiredJwtException ex) {
      logger.error("Expired JWT token");
    } catch (UnsupportedJwtException ex) {
      logger.error("Unsupported JWT token");
    } catch (IllegalArgumentException ex) {
      logger.error("JWT claims string is empty.");
    }
    return false;
  }
}

以上就是一个简单的使用Vue3和Spring Boot实现用户登录和保存用户信息到Vuex store中的实例。其中，涉及到了Vue3的Vuex库、Spring Boot的RESTful API、Spring Security和JwtTokenProvider等技术，需要在前后端都进行配置和编码。