最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中用fetch出错:No Access-Control-Allow-Origin header is present on the requested resource

ReactJS crifan 4811浏览 0评论

折腾:

【已解决】ReactJS中好用的获取网络数据的http库

期间,代码:

import ‘whatwg-fetch’;
    fetch(
      ‘http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/getProgressData’,
      {
        method : ‘POST’,
        headers : {
          ‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’,
          ‘Accept’: ‘application/json’
        },
        body: ‘currTime=2017-08-25&orgCode=SK316005’
      }
    )
      .then((res) => {
        console.log(res);
      });

结果出错:

Fetch API cannot load http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/getProgressData. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4000’ 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.
:4000/rse_web/main/progess_monitor/progress_monitor:1 Uncaught (in promise) TypeError: Failed to fetch

No Access-Control-Allow-Origin header is present on the requested resource

fetch No Access-Control-Allow-Origin header is present on the requested resource

fetch API cannot load error with cors in chrome/firefox · Issue #301 · github/fetch

javascript – fetch error No ‘Access-Control-Allow-Origin’ header is present on the requested resource – Stack Overflow

reactjs – Fetch API cannot load, cors – Stack Overflow

node.js – Fetch API cannot load … No ‘Access-Control-Allow-Origin’ header – Stack Overflow

去加:

"Access-Control-Allow-Origin", “*"

试试

【总结】

加上:

‘Access-Control-Allow-Origin’: ‘*’

代码:

    fetch(
      ‘http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/getProgressData’,
      {
        method : ‘POST’,
        headers : {
          ‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’,
          ‘Accept’: ‘application/json’,
          // ‘User-Agent’ : ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36’,
          // ‘Origin’ : ‘http://x.x.x.x:8080’,
          // ‘Referer’ : ‘http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/reportProgressMonit’
          ‘Access-Control-Allow-Origin’: ‘*’
        },
        body: ‘currTime=2017-08-25&orgCode=SK316005’
      }
    )
      .then((res) => {
        console.log(res);
      });

这个错误的内容变了:

progress-monitor.js:126 OPTIONS http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/getProgressData 403 (Forbidden)
componentWillMount @ progress-monitor.js:126
componentWillMount @ createPrototypeProxy.js:44
(anonymous) @ ReactCompositeComponent.js:348
。。。
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
:4000/rse_web/main/progess_monitor/progress_monitor:1 Fetch API cannot load http://61.152.249.210:8080/rse-oracle/moblie/reportProgress/getProgressData. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4000’ is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
:4000/rse_web/main/progess_monitor/progress_monitor:1 Uncaught (in promise) TypeError: Failed to fetch

Allow Access-Control-Allow-Origin header using HTML5 fetch API – Stack Overflow

How to solve – No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. In angular js? – JavaScript / AngularJS – Code School Forum

OPTIONS 403 (Forbidden) Fetch API cannot load

cannot get cross-site POST to work · Issue #191 · mzabriskie/axios

axios/xhr.js at master · mzabriskie/axios

http – Node.js CORS resulting in 403 Forbidden – Stack Overflow

加上:

          ‘Access-Control-Allow-Origin’: ‘*’,
          ‘Access-Control-Allow-Headers’ : ‘Origin, X-Requested-With, Content-Type, Accept’,
          ‘Access-Control-Allow-Methods’ : ‘POST, GET, OPTIONS’

试试

问题依旧。

javascript – Axios CORS issue with Github oauth Not getting access token – Stack Overflow

If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled

fetch api – What is an opaque request, and what it serves for? – Stack Overflow

加上:

‘mode’: ‘no-cors’

试试,问题依旧。

Still need to use the "Enable CORS" feature on AWS Console to get CORS to work · Issue #28 · joostfarla/serverless-cors-plugin

依稀记得以前的自己折腾过和Access-Control-Allow-Origin相关的东西,后来去搜:

Access-Control-Allow-Origin crifan

还果真找到了:

[已解决]Mac中Chrome运行js出错:XMLHttpRequest cannot load – 在路上

然后是通过Chrome安装插件而解决的这个问题。

那意思是,换Safari可以正常访问?

那去试试,结果是另外的错误:

【已解决】Safari中fetch出错:Failed to load resource Preflight response is not successful

先去试试Chrome中安装插件是否可以。

Allow-Control-Allow-Origin: * – Chrome 网上应用店

结果发现之前已经安装了该插件且已启动了的:

不启动该插件,结果问题依旧。

对于用同样代码:

    fetch(
      ‘http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/getProgressData’,
      {
        method : ‘POST’,
        // method : ‘GET’,
        headers : {
          ‘Content-Type’: ‘application/x-www-form-urlencoded; charset=UTF-8’,
          ‘Accept’: ‘application/json’,
          // ‘Accept’: ‘application/json, text/javascript, */*; q=0.01’,
          // // ‘User-Agent’ : ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36’,
          // ‘Origin’ : ‘http://x.x.x.x:8080’,
          // ‘Referer’ : ‘http://x.x.x.x:8080/rse-oracle/moblie/reportProgress/reportProgressMonit’,
          // ‘Access-Control-Allow-Origin’: ‘*’,
          // ‘Access-Control-Allow-Headers’ : ‘Origin, X-Requested-With, Content-Type, Accept’,
          // ‘Access-Control-Allow-Methods’ : ‘POST, GET, OPTIONS’,
          // ‘X-Requested-With’ : ‘XMLHttpRequest’,
          // ‘mode’: ‘no-cors’
        },
        body: ‘currTime=2017-08-25&orgCode=SK316005’
        // body: {
        //   currTime: ‘2017-08-25’,
        //   orgCode: ‘SK316005’
        // }
      }
    )

safari中的现象和Chrome中是一样的,都是:

加了:Origin和Referer后,问题依旧。

Access-Control-Allow-Origin Chrome not work

javascript – Disable same origin policy in Chrome – Stack Overflow

javascript – Origin is not allowed by Access-Control-Allow-Origin – Stack Overflow

javascript – Disable same origin policy in Chrome – Stack Overflow

去试试那个:

open -a Google\ Chrome –args –disable-web-security

不过先去试试之前的一个,貌似事新版的Mac的,Chrome的浏览器

Google Chrome Canary

看看这个是否有同样问题。

先去看看是否启动了插件:

这个没有装

结果问题依旧:

给这个Chrome也安装那个:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=zh-CN

结果Canary中这个插件也没用,问题依旧。

也看到了,关于:

Allow-Control-Allow-Origin

有其它两个插件:

待会都去试试。

Moesif Origin & CORS Changer – Chrome 网上应用店

结果:

还真的可以了:

【总结】

此处ReactJS的fetch库的http的POST时出现:

No Access-Control-Allow-Origin header is present on the requested resource

的错误,原因是:

(此处的Mac中)Chrome浏览器默认禁止了跨域访问CORS

解决办法是:

Chrome中去禁止掉CORS即可。

方法多种:

1.命令行加启动参数

用命令行启动Chrome时加上

–disable-web-security

即可。

比如:

$ open -a Google\ Chrome –args –disable-web-security

2.使用Chrome中插件去禁止掉CORS

经过实际测试,之前用的最广的那个:

Allow-Control-Allow-Origin: * – Chrome 网上应用店

现在不知道为何,总之是没用的,无效的。而新出的:

Moesif Origin & CORS Changer – Chrome 网上应用店

是有用的,可以(不用麻烦的通过在启动Mac中Chrome时加参数的方式)去禁止掉Chrome的CORS。

【后记】

后来经过自己继续折腾发现:

之前自己误解了插件:

Allow-Control-Allow-Origin: * – Chrome 网上应用店

事实上也是有效的,只不过是:

虽然在Chrome中的扩展程序中,是启用了该插件的,但是该插件默认关闭的,图表是红色的:

然后去开启该CORS功能后,图表变为绿色:

才是真的开启,然后的确也就可以解决此处

No Access-Control-Allow-Origin header is present on the requested resource

的错误提示了。。。

即:

安装了:

Allow-Control-Allow-Origin: * – Chrome 网上应用店

后,记得要看看,工具栏右边的CORS图表,确保是绿色开启了禁止CORS功能的情况下,才有效。

转载请注明:在路上 » 【已解决】ReactJS中用fetch出错:No Access-Control-Allow-Origin header is present on the requested resource

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
60 queries in 0.098 seconds, using 18.37MB memory