关于fetch和axios写入请求头解决跨域请求的区别

ajax逐渐被淘汰，现在的主流异步请求方法主要是fetch和axios.

在前后端分离的现状下，vue因为有自己的监听端口，访问后端controller通常是跨域请求。跨域请求的处理方法通常有3种：

1.core（跨域资源共享）

2.nginx等反向代理机制，在nginx.conf中配置请求头

3.直接通过fetch或者axiox的config属性写入请求头

2、3方法都是写入

'Access-Control-Allow-Origin': '*',

这个请求头,但是两种方法的写法有所差别：

1.fetch:

let requestConfig = {
    //credentials  是否能在跨域请求下从其他域传递cookie
    // credentials: 'include',
    method: type,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    'Access-Control-Allow-Origin': '*',
    mode: "cors"
}

需要注意的是：origin属性不定义在headers中，可以通过测试发现：如果定义在headers中，'Access-Control-Allow-Origin'会被解析为 'Orign'属性。

2.axios：

axios.get(urlString, 
    {
       headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' ,'Access-Control-Allow-Origin': '*',},
        params: {
        },
    }
)

顺便一提nginx中跨域的配置也是写入请求头:

 location / {
            if ($args= "true") {
                add_header 'Access-Control-Allow-Origin' "$http_origin";
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
            }
            proxy_pass http://localhost:8091/;