react 使用fetch跨域报No 'Access-Control-Allow-Origin'

Question

请看下面我的回答(下客介)，来个人帮帮，不想再熬夜了。感谢

不懂后端，望提供前端可以解决的方案，感谢

1-fetch跨域请求"聚合数据"提供的新闻API，报“ 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.”

2-相关代码段
webpack.config.js片段：
安装了：

var proxy = require('http-proxy-middleware');
require('es6-promise').polyfill();
require('isomorphic-fetch')

;

xxx.js片段：

3-浏览器console与network截图：

Answer 1

谢邀！首先错误信息是服务器端头部匹配时出现不匹配现象，即未设置Access-Control-Allow-Origin。
解决跨域一般采用下面几种方法：

1.JSONP方式解决跨域问题
jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用)，其中jsonp只能是“GET”请求,不能进行较为复杂的POST和其它请求。

2.CORS解决跨域问题
CORS需要浏览器和服务器同时支持。其中通信的关键是服务器，要想跨源通信，服务器必须实现CORS接口。

3.代理请求方式解决接口跨域问题
代理请求主要是对接口进行代理，前端ajax请求的是本地接口，本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端，node.js即可代理。

4.浏览器插件
谷歌浏览器跨域插件：Allow-Control-Allow-Origin

Answer 2

跨域的问题，请查询CORS关键字。解决方法,必须后端的响应头加上'Access-Control-Allow-Origin': '*' 。或者指定具体的域名。 前端不可能控制的。

Answer 3

请求的headers里设置'Access-Control-Allow-Origin': '*'

Answer 4

我请求的是聚合数据的新闻头条api。采用 webpack-dev-server --history-api-fallback 启动前端行项目，在在webpack.config.js 里面添加proxy 配置。采用isomorphic-fetch 来请求资源的。

我采用的是"justfine"的第三种方案(见回答)，参考的是'二月'-React系列——用proxy 1分钟解决跨域问题中的方法2.但还是报同样的错误，不明白哪里出现了问题，望知情者给予解答，十分感谢。

其中‘二月’回复我说——"proxy做的是转发请求，因为当前域名和目标域名不一样，而目标域名没有设置允许跨域，proxy将当前域名的请求切换到目标域名去请求，就避开了跨域"

我的理解是当前域名为'localhost'，目标域名为'v.juhe.cn/toutiao/index?type=top&key=..'目标域名(聚合数据)即服务器没有实现CORS接口。

我参考‘二月’与‘justfine’以及‘王下邀月熊_Chevalier’浏览器跨域方法与基于Fetch的Web请求最佳实践的说法，采用的便是Proxy:服务端跨域(代理方式跨域)，SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。

我将新闻头条API换成美团API 现在报的新错误是Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

fetch：

webpack.cinfig.js:

报错信息：

network信息：

下面这图让我感觉根本没请求到数据——————还是说请求的json有问题导致的：

下面是Postman测试接口返回的数据，我用json在线解析式图看了一下，返回的json没问题

console打印结果。console.log(response)

Answer 5

你在proxy里面都设置了代理请求匹配api路径，但是没有按照设置你请求的还是原地址当然不会给你代理
ajax 路径 /api/toutiao...

Answer 6

看你的配置：

配置有问题，target你配置域名就行了，不用具体到某一个api，这样当你访问http://localhost:8080/api/toutiao/index时，会被代理转发到这个地址：

http://v.juhe.cn/toutiao/index

再看你的请求，你使用的是http://v.juhe.cn/toutiao/index来请求，还把请求头的origin给改了，这样你配置代理的作用何在？所以你应该用http://localhost:8080/api/toutiao/index来发请求，这样才能走你设置的代理，跟CORS没关系，是你使用代理的姿势不对！

建议题主再仔细看一下http-proxy-middleware的用法哈

Answer 7

前端 only 无解。

Answer 8

这是我的代码，昨天我也是卡在这半天，不过我这是vue项目

然后每次请求的时候只要接口前边加上/api就好了，
还有一种方法：直接在package.json里加上 "proxy": "http://localhost:3000"，冒号后边是你真实要转发过去的服务器地址

Answer 9

谢邀

前端解决方案给你俩种

1  项目中配置proxy代理,我看你图中配置了代理 但是错误点是 路径有问题
举个例子  http://www.aaa.com/abc.do 或 http://www.aaa.com/deg.do 这种接口
你target 应该为 http://www.aaa.com
项目使用   /api/abc.do 这样去调取接口
2 本地配置host  修改host为你访问的接口  然后域名访问项目  xxx   yyy 百度即可很简单

Answer 10

后端加请求头。前端无解

Answer 11

1、修改host文件，映射到v.juhe.cn

2、chrome跨域
--disable-web-security --user-data-dir
具体百度一下。