如何处理前端请求跨域问题?

2020-03-20  本文已影响0人  涂小码

备注:浏览器会拦截跨域,但是options请求会发送到后端去;
1.检查前端部分网络请求header设置如下:

axios.interceptors.request.use(
    config => {
    config.headers["Access-Control-Allow-Origin"] ="*";
    return {
        ...config,
        timeout:8000,
        withCredentials: true //是否允许cookie跨域处理
        };
    },
    error => {
        return Promise.reject(error);
       }
);

2.检查ng配置是否如下:

http { 
    ###start#### 
    add_header Access-Control-Allow-Origin *; 
    add_header Access-Control-Allow-Headers X-Requested-With; 
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS; 
    ###end ### 
}

3.检查服务端跨域配置:
写一个Filter,在doFilter里面加:

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        // TODO Auto-generated method stub
        // place your code here
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;
        // 指定允许其他域名访问
        resp.setHeader("Access-Control-Allow-Origin", "*");
        // 响应类型
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");
        // 响应头设置
        resp.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");
        if ("OPTIONS".equals(req.getMethod())){
            resp.setStatus(HttpStatus.SC_NO_CONTENT);
        }
        chain.doFilter(request, response);
    }

4.检查各个微服务之间是否重复设置跨域问题

Access-Control-Allow-Origin:”*"
Access-Control-Allow-Origin:”*"
上一篇 下一篇

猜你喜欢

热点阅读