没有 'Access-Control-Allow-Origin' 标头 Vue/Spring 启动答案

【问题标题】：No 'Access-Control-Allow-Origin' header Vue/Spring boot没有 'Access-Control-Allow-Origin' 标头 Vue/Spring 启动
【发布时间】：2018-09-25 01:40:51
【问题描述】：

我似乎无法弄清楚这个错误“No 'Access-Control-Allow-Origin' header”。

我有一个 Vue 前端在 localhost:8080 上运行，spring 后端在 locahost:8082 上生成 JWT 令牌

在尝试将凭据发布到我的 /signin 时，我不断收到此错误。我在我的 spring 控制器上尝试了@CrossOrigin("http://localhost:8080")，以及我的 SecurityConfig 中的CorsConfigurationSource 全局 bean。下面是我使用 axios 登录帖子的 Vue 代码：

    login(context, creds, redirect) {
    var headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
      }
    axios.post(LOGIN_URL, '{"username": "name", "password": 
    "pass"}', headers)
    .then(function(response){
        console.log(response)
        this.user.authenticated = true
     }).catch(function (error) {
        console.log(error);
     });
     },

我的登录页面采用 {"username": "name", "password": "pass"}，我有一个登录页面，在登录时会传递用户名和密码，但排除了可能的原因，因此我对其进行了硬编码以进行测试在上面的代码中。

最后我尝试了 chrome CORS 插件，它消除了错误但仍然返回 403。在邮递员中一切正常。

【问题讨论】：

改用@CrossOrigin(origins = "http://localhost:8080")。
也试了，还是报错？？

标签： java spring vue.js cross-domain access-control

【解决方案1】：

Foundout @CrossOrigin(origins = "*", allowedHeaders = "*") 只能在我的 api 中工作，这很奇怪。但是通过添加这个全局方法：

 @Bean
 public WebMvcConfigurer corsConfigurer() {
   return new WebMvcConfigurerAdapter() {
     @Override
     public void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/**").allowedOrigins("http://localhost:8080");
         }
       };
}

我之前的问题是最后没有 .allowedOrigins 是行不通的。

【讨论】：