Axios CORS 错误（403）甚至服务器允许所有答案

【问题标题】：Axios CORS error (403) even server allow allAxios CORS 错误（403）甚至服务器允许所有
【发布时间】：2020-03-28 09:33:47
【问题描述】：

我尝试通过 Axios POST 请求从 Springboot 服务器获取 jwt 令牌，但出现以下错误：

xhr.js:166 OPTIONS url net::ERR_ABORTED 403
Access to XMLHttpRequest at 'url' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

它似乎无法通过带有“Access-Control-Allow-Origin”标头的预检请求。所以我在标题上配置了“Access-Control-Allow-Origin”，但不知何故它仍然无法正常工作。

代码如下：

反应：

return Axios({
      method: 'post',
      url: 'url',
      data: qs.stringify(json),
      headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'authorization': 'Basic token',
      },
    });

Spring Boot：

 @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration conf = new CorsConfiguration();
        conf.setAllowedOrigins(Arrays.asList("*"));
        conf.setAllowedMethods(Arrays.asList("POST", "GET", "OPTIONS", "DELETE", "PUT"));
        conf.setAllowedHeaders(Arrays.asList("Content-Type", "X-Requested-With", "accept,Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers", "Authorization", "Cache-Control", "Access-Control-Allow-Origin"));
        conf.setAllowCredentials(true);
        conf.setMaxAge(3600L);
        ...
    }

【问题讨论】：

我认为您的服务器配置错误。在这种情况下，客户无事可做

标签： spring spring-boot cors axios

【解决方案1】：

我发现了这个问题。我没有注意到来自服务器的响应标头没有Access-Control-Allow-Origin。所以 Access-Control-Allow-Origin 响应头必须告诉浏览器允许来自某个来源的任何请求（在本例中为 http://localhost:3000），我现在还没有设置返回。所以我使用过滤器在响应头上添加Access-Control-Allow-Origin:*。

这是我添加的代码。

package com.citus.travelmaker.api.config.datasource;

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCorsFilter implements Filter {
    public SimpleCorsFilter() {
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }


    @Override
    public void destroy() {
    }
}

上面的代码是我从here得到的。这样我就可以从服务器获得 200 状态。

你也可以看看我改代码前后响应头的区别

之前

之后

如您所见，Access-Control-Allow-Origin 添加得很好

【讨论】：

【解决方案2】：

试试这个，默认情况下允许所有标题和网址只是检查

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**").allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS").allowedHeaders("*")
            .allowCredentials(true).maxAge(MAX_AGE_SECS);
}

你的网址也不应该没有引号

return Axios({
  method: 'post',
  url: url,  // like this
  data: qs.stringify(json),
  headers: {
  'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
    'authorization': 'Basic token',
  },
});

最后只是做个笔记

检查你的 URL 是否在安全配置中被允许，否则你会得到 403

@Override
protected void configure(HttpSecurity http) throws Exception {
     http.authorizeRequests()
     ...
     .antMatchers("/url*").permitAll()  // Allow whatever url is passed
     ...
     ;
}

【讨论】：