ajax和axios的cookie跨域出现的问题以及解决方法

最新推荐文章于 2024-08-02 00:06:36 发布

magic_happy

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量8.1k

点赞数

分类专栏： JavaScript 文章标签：跨域问题 CORS JavaScrip java

本文链接：https://blog.csdn.net/qq_25551573/article/details/80690583

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.如果前端ajax和axios请求中使用允许携带cookie参数：

ajax设置：

$.ajax({ 

       url : '',

        data : data,

        dataType: 'json',

        type : 'POST',

        xhrFields: {

            withCredentials: true

        },        

        crossDomain: true,

        contentType: "application/json",

axios设置：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // node环境的不同，对应不同的baseURL
 timeout: 5000, // 请求的超时时间
 //设置默认请求头，使post请求发送的是formdata格式数据// axios的header默认的Content-Type好像是'application/json;charset=UTF-8',我的项目都是用json格式传输，如果需要更改的话，可以用这种方式修改
 // headers: { 
 // "Content-Type": "application/x-www-form-urlencoded"
 // },
 withCredentials: true // 允许携带cookie
})

这个时候需要注意需要后端配合设置：

header信息 Access-Control-Allow-Credentials:true

Access-Control-Allow-Origin不可以为 '*'，因为 '*' 会和 Access-Control-Allow-Credentials:true 冲突，需配置指定的地址

如果后端设置 Access-Control-Allow-Origin: '*', 会有如下报错信息：

Failed to load http://localhost:8090/category/lists: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

后端配置缺一不可，否则会出错，贴上我的后端示例：

/**
 * 跨域请求
 * @author sunll
 */
public class CorsFilter implements Filter {

    public Logger log = Logger.getLogger(this.getClass());

    private final List<String> allowedOrigins = Arrays.asList("http://192.168.3.52:3000","http://192.168.3.93:3000","http://192.168.8.132:3000","http://192.168.2.64:3000","http://adp5.admin.yunpaas.cn/admin/");
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        // Lets make sure that we are working with HTTP (that is, against HttpServletRequest and HttpServletResponse objects)
        if (req instanceof HttpServletRequest && res instanceof HttpServletResponse) {

            // Access-Control-Allow-Origin
            String origin = request.getHeader("Origin");
            System.out.println("origin.........."+origin);
            response.setHeader("Access-Control-Allow-Origin", allowedOrigins.contains(origin) ? origin : "");
            response.setHeader("Vary", "Origin");

            // Access-Control-Max-Age
            response.setHeader("Access-Control-Max-Age", "3600");

            // Access-Control-Allow-Credentials
            response.setHeader("Access-Control-Allow-Credentials", "true");

            // Access-Control-Allow-Methods
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

            // Access-Control-Allow-Headers
            response.setHeader("Access-Control-Allow-Headers",
                    "Origin, X-Requested-With, Content-Type,Accept,X-Custom-Header, " + "USER-TOKEN");
        }
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }


}

成功之后，可在请求中看到