fetch跨域问题

CORS:跨域资源共享

跨域资源共享，Cross-Origin Resource Sharing是由W3C提出的一个用于浏览器以XMLHttpRequest方式向其他源的服务器发起请求的规范。不同于JSONP，CORS是以Ajax方式进行跨域请求，需要服务端与客户端的同时支持。目前CORS在绝大部分现代浏览器中都是支持的:

CORS标准定义了一个规范的HTTP Headers来使得浏览器与服务端之间可以进行协商来确定某个资源是否可以由其他域的客户端请求获得。尽管很多的验证与鉴权是由服务端完成，但是本质上大部分的检查和限制还是应该由浏览器完成。一般来说CORS会分为Simple Request，简单请求与Preflight，需要预检的请求两大类。

预检请求

当浏览器的请求方式是HEAD、GET或者POST，并且HTTP的头信息中不会超出以下字段:

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

时，浏览器会将该请求定义为简单请求，否则就是预检请求。预检请求会在正式通信之前，增加一次HTTP查询请求。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。预检请求的发送请求：

OPTIONS /cors HTTP/1.1Origin: http://api.qiutc.meAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.qiutc.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

“预检”请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。
除了Origin字段，”预检”请求的头信息包括两个特殊字段:

• Access-Control-Request-Method:该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

• Access-Control-Request-Headers:该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

预检请求的返回：

HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMTServer: Apache/2.0.61 (Unix)Access-Control-Allow-Origin: http://api.qiutc.meAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderContent-Type: text/html; charset=utf-8Content-Encoding: gzipContent-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-AliveContent-Type: text/plain

• Access-Control-Allow-Methods:必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。

• Access-Control-Allow-Headers:如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。

• Access-Control-Max-Age:该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

一旦服务器通过了”预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

简单请求

对于简单的跨域请求或者通过了预检的请求，浏览器会自动在请求的头信息加上Origin字段，表示本次请求来自哪个源（协议 + 域名 + 端口），服务端会获取到这个值，然后判断是否同意这次请求并返回。典型的请求头尾:

// 请求GET /cors HTTP/1.1Origin: http://api.qiutc.meHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

如果服务端允许，在返回的头信息中会多出几个字段:

// 返回Access-Control-Allow-Origin: http://api.qiutc.meAccess-Control-Allow-Credentials: trueAccess-Control-Expose-Headers: InfoContent-Type: text/html; charset=utf-8

• Access-Control-Allow-Origin:必须。它的值是请求时Origin字段的值或者 *，表示接受任意域名的请求。

• Access-Control-Allow-Credentials:可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。

再需要发送cookie的时候还需要注意要在AJAX请求中打开withCredentials属性：var xhr = new XMLHttpRequest(); xhr.withCredentials = true;

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

• Access-Control-Expose-Headers:可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方

法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-

Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('Info')可以返回Info字段的值。

如果服务端拒绝了调用，即不会带上 Access-Control-Allow-Origin 字段，浏览器发现这个跨域请求的返回头信息没有该字段，就会抛出一个错误，会被 XMLHttpRequest 的 onerror 回调捕获到。这种错误无法通过 HTTP 状态码判断，因为回应的状态码有可能是200。

。

上代码，这里封装了一下fetch方法。

if (window.fetch && method == 'fetch') { let requestConfig = {  credentials: 'include',  method: type,     mode:'cors',  headers: {   'Accept': 'application/json',   'Content-Type': 'application/json'       //'Content-Type':'applcation/x-www-form-urlencoded'  },  cache: "force-cache" } if (type == 'POST') {  Object.defineProperty(requestConfig, 'body', {   value: JSON.stringify(data)  }) } try {  const response = await fetch(url, requestConfig);  return response } catch (error) {  throw new Error(error) }} else {

服务端是否支持可以问下后端同事，如果是自己承担后端编码，则可以直接自己设置，比如node，

app.all('*', (req,res,next) =>{    console.log(req.headers.origin)    res.header("Access-Control-Allow-Origin", "http://localhost:8080");    res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");    res.header("Access-Control-Allow-Credentials", true); //可以带cookies    res.header("X-Powered-By", '3.2.1')    if (req.method == 'OPTIONS') {        res.send('200');    } else {       next();    }});
我这里是8080端口请求8081服务的数据，如果设置
res.header("Access-Control-Allow-Origin", "*");
这样浏览器报错拒绝发送fetch请求，这里我也不知道为什么。

如果服务器不支持 CORS， 则不用使用 Fetch Api 了。

`Fetch Api` 必须后台支持 `CORS`,。如果你设置了 `{mode: ' cors '}`(一般用于请求API)，就会报错告诉你你请求的服务器不支持 `CORS`。大概会报下面的错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果设置成 `{mode: ' no-cors '}` (一般用于请求图片等静态资源), 虽然可以在浏览器看见response下面的返回值，报错的话也可以规避，但是结果会返回被标记了为 `opaque` 的数据，表明你没有权限访问，你是无法获取到的，很气。

<img src="https://pic4.zhimg.com/v2-5bbd2fc2f90d8c5b3755616e5dd449bb_b.png" data-rawwidth="222" data-rawheight="183" class="content_image" width="222">

这种情况下可以使用 JSONP。