跨域问题和Cookie及简单/非简单请求2. 怎么解决？浏览器-xhr-跨域｛1. 被调用方修改为支持跨域 2.调用方

为什么会发生跨域问题？

浏览器限制，跨域[协议，域名，端口任一不一样，就会跨域]，XHR请求(只要不是xhr请求，浏览器是不报跨域的)三个同时满足，才会产生跨域

2. 怎么解决？

浏览器-xhr-跨域｛1. 被调用方修改为支持跨域 2.调用方设置代理｝

JSONP说明：

JSONP-后台是需要改动的，请求类型是script

content-type: application/JavaScript
弊端:服务端需要改动代码支持，只支持get,发送的不是xhr请求(异步)

带有Cookie的跨域

在前后端分离的开发过程中，遇到跨域请求时，则服务端需加上：

res.header('Access-Control-Allow-Origin', req.get("Origin"));
res.header('Access-Control-Allow-Headers', 'credentials,Content-Type, Content-Length, Authorization, Accept, X-Requested-With, token');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    
//若要返回cookie、携带seesion等信息则将此项设为true。此时Access-Control-Allow-Origin不能设置为*
res.header("Access-Control-Allow-Credentials","true");

如果有自定义的 header 字段，则需要在 'Access-Control-Allow-Headers' 中添加。
如果需要设置 cookie ，则需要设置 Access-Control-Allow-Credentials 为 true ，并且 Access-Control-Allow-Origin 不能设置为 *。
请求时需要带上 credential 相关的参数，这点很重要，否则 session request id 每次都不一样。

若使用 fetch ，设置 credentials: 'include'

const init = {
     headers: {
         'Accept': 'application/json',
          'Content-Type': 'application/json;charset=UTF-8',
     },
     method: 'GET',
     credentials: 'include'
}

若使用 request ，设置 request.defaults({jar: true}) 。

// qs，表示query参数
var options = {
    'url': url,
    'qs': {
         'code': code,
     }
}
    
 // 设置可以使用cookie
var defaultReq = request.defaults({jar: true})

defaultReq(options, function (error, response, body) {
}

若使用 axios ，则设置 withCredentials:true。

简单/非简单请求

简单请求

1、请求方法：GET、HEAD或者POST，

2、请求header里面：无自定义头；Content-type为以下几种：

application/x-www-form-urlencoded, multipart/form-data或着text/plain

非简单请求

工作中常见的【非简单请求】有：

1、put、delete方法的ajax请求

2、发送json格式的ajax请求

3、带自定义头的ajax请求