fetch 跨域该怎么写?

用的是isomorphic-fetch 前端代码: export function fetchMonitoringTarget() { "use strict"; return dispatch => { //debugger; const headers = new Headers({ "Content-Type": 'application/json', "Accept": 'application/json', "Origin": '*', "Access-Control-Allow-Origin": '*' }); //debugger; dispatch(requestMonitoringTarget()) return !fetch('http://localhost:3000/monitoring/target', { method…
关注者
24
被浏览
16748

[分为下面两种情况]

1. 如果服务器支持 CORS, 则在客户端设置相应的 `Access-Control-Allow-Origin` 即可得到数据。

let myHeaders = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'text/plain'
});
fetch(url, {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors'
}) .then((res) => {
    // TODO 
}) 

服务端是否支持可以问下后端同事,如果是自己承担后端编码,则可以直接自己设置,比如如果是 PHPer, header 一下响应头即可。

header("Access-Control-Allow-Origin: *"); 

2. 如果服务器不支持 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 '}` (一般用于请求图片等静态资源), 虽然不会报错,但是结果会 返回被标记了为 `opaque` 的数据,表明你没有权限访问。

这种情况下可以使用 JSONP


题主这种错误应该是由于 后端不支持 CORS 造成的。