Question

我编写了一个redux应用程序，我使用webpack-dev-server在本地运行。（港口8080）。我正在尝试连接到在端口9000本地运行的Web服务。

我连接到网络服务的代码如下

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`)
  .then(response => response.json())
  .then(json =>
    dispatch(receivedDimensionAttributesSuccess(dimensionName, json))
  )
  .catch(error =>
    dispatch(receivedDimensionAttributesError(dimensionName, error))
  );

收到错误

Fetch API cannot load http://localhost:9000/movies/yearlist. No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'http://localhost:8080' is therefore not allowed access. If an opaque response 
serves your needs, set the request's mode to 'no-cors' to fetch the resource 
with CORS disabled.

我用Google搜索了问题并找到了这个帖子

Access Control Allow Origin header not present with fetch api call

但我不喜欢解决方案，它涉及到完全切换到不同的库/中间件。

如何使用isomorphic fetch库解决问题。

Answer 1

look at me,this works

你必须使用

let header = new Headers({
        'Access-Control-Allow-Origin':'*',
        'Content-Type': 'multipart/form-data'
});

而不是

let defaultOptions = {
    url:'',
    method:'POST',
    mode: 'cors',
    headers:{
        'Access-Control-Allow-Origin':'*'
    },
    body:null,
};

启用角色

Answer 2

<? $var1 = 100; $var2 = 100; include_once('wp-config.php'); echo "var1 + var2 = $var1 + $var2"; //var1 + var2 = ?>是您可以在客户端控制的。对于需要与服务器协商的浏览器，这是一个安全限制。

服务器可以从任何端点检索数据，但对于浏览器应用程序，这是不同的。出于安全原因，您只能从已加载网页的同一服务器通过XHR加载数据。如果您需要从其他服务器（例如外部API）加载数据，则浏览器要求服务器响应，表明您已被允许。

参见＆＃34;跨域请求＆＃34; Interesting link on SO about that here

部分

Answer 3

您只需添加{mode:'no-cors',}即可停用否'访问权限 - Control-Allow-Origin'标题。有关更多信息，请参阅以下网址：

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`**,{mode:'no-cors'**,})
  .then(response => response.json())

Answer 4

您可以阅读此https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

fetch(url[, init])

将init参数设置为允许跨域请求

试

redux isomorphic fetch Access-Control-Allow-Origin

4 个答案: