react 使用fetch跨域報(bào)No 'Access-Control-Allow-Origin'

請(qǐng)看下面我的回答(下客介)，來(lái)個(gè)人幫幫，不想再熬夜了。感謝

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

1-fetch跨域請(qǐng)求"聚合數(shù)據(jù)"提供的新聞API，報(bào)“ 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-相關(guān)代碼段
webpack.config.js片段：
安裝了：

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

;
圖片描述

xxx.js片段：
圖片描述

3-瀏覽器console與network截圖：

圖片描述

回答

編輯回答

青裙

1、修改host文件，映射到v.juhe.cn
圖片描述

2、chrome跨域
--disable-web-security --user-data-dir
具體百度一下。
圖片描述

2018年4月10日 05:51

編輯回答

孤影

我請(qǐng)求的是聚合數(shù)據(jù)的新聞?lì)^條api。采用 webpack-dev-server --history-api-fallback 啟動(dòng)前端行項(xiàng)目，在在webpack.config.js 里面添加proxy 配置。采用isomorphic-fetch 來(lái)請(qǐng)求資源的。

我采用的是"justfine"的第三種方案(見(jiàn)回答)，參考的是中的方法2.但還是報(bào)同樣的錯(cuò)誤，不明白哪里出現(xiàn)了問(wèn)題，望知情者給予解答，十分感謝。

其中‘二月’回復(fù)我說(shuō)——"proxy做的是轉(zhuǎn)發(fā)請(qǐng)求，因?yàn)楫?dāng)前域名和目標(biāo)域名不一樣，而目標(biāo)域名沒(méi)有設(shè)置允許跨域，proxy將當(dāng)前域名的請(qǐng)求切換到目標(biāo)域名去請(qǐng)求，就避開(kāi)了跨域"

我的理解是當(dāng)前域名為'localhost'，目標(biāo)域名為'v.juhe.cn/toutiao/index?type=top&key=..'目標(biāo)域名(聚合數(shù)據(jù))即服務(wù)器沒(méi)有實(shí)現(xiàn)CORS接口。

我參考‘二月’與‘justfine’以及‘王下邀月熊_Chevalier’瀏覽器跨域方法與基于Fetch的Web請(qǐng)求最佳實(shí)踐的說(shuō)法，采用的便是Proxy:服務(wù)端跨域(代理方式跨域)，SOP的限制是瀏覽器實(shí)現(xiàn)的。如果請(qǐng)求不是從瀏覽器發(fā)起的，就不存在跨域問(wèn)題了。

我將新聞?lì)^條API換成美團(tuán)API 現(xiàn)在報(bào)的新錯(cuò)誤是Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

fetch：
圖片描述

webpack.cinfig.js:

圖片描述

報(bào)錯(cuò)信息：

圖片描述

network信息：

圖片描述

下面這圖讓我感覺(jué)根本沒(méi)請(qǐng)求到數(shù)據(jù)——————還是說(shuō)請(qǐng)求的json有問(wèn)題導(dǎo)致的：
圖片描述

下面是Postman測(cè)試接口返回的數(shù)據(jù)，我用json在線解析式圖看了一下，返回的json沒(méi)問(wèn)題

圖片描述

console打印結(jié)果。console.log(response)

圖片描述

2017年10月16日 19:26

編輯回答

孤影

你在proxy里面都設(shè)置了代理請(qǐng)求匹配api路徑，但是沒(méi)有按照設(shè)置你請(qǐng)求的還是原地址當(dāng)然不會(huì)給你代理
ajax 路徑 /api/toutiao...

2017年4月10日 23:26

編輯回答

孤島

前端 only 無(wú)解。

2018年5月17日 10:32

編輯回答

悶騷型

后端加請(qǐng)求頭。前端無(wú)解

2018年4月20日 11:37

編輯回答

過(guò)客

看你的配置：

配置有問(wèn)題，target你配置域名就行了，不用具體到某一個(gè)api，這樣當(dāng)你訪問(wèn)http://localhost:8080/api/toutiao/index時(shí)，會(huì)被代理轉(zhuǎn)發(fā)到這個(gè)地址：

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

再看你的請(qǐng)求，你使用的是http://v.juhe.cn/toutiao/index來(lái)請(qǐng)求，還把請(qǐng)求頭的origin給改了，這樣你配置代理的作用何在？所以你應(yīng)該用http://localhost:8080/api/toutiao/index來(lái)發(fā)請(qǐng)求，這樣才能走你設(shè)置的代理，跟CORS沒(méi)關(guān)系，是你使用代理的姿勢(shì)不對(duì)！

建議題主再仔細(xì)看一下http-proxy-middleware的用法哈

2018年2月9日 11:58

編輯回答

凹凸曼

請(qǐng)求的headers里設(shè)置'Access-Control-Allow-Origin': '*'

2017年12月12日 20:47

編輯回答

不二心

謝邀

前端解決方案給你倆種

1  項(xiàng)目中配置proxy代理,我看你圖中配置了代理 但是錯(cuò)誤點(diǎn)是 路徑有問(wèn)題
舉個(gè)例子  http://www.aaa.com/abc.do 或 http://www.aaa.com/deg.do 這種接口
你target 應(yīng)該為 http://www.aaa.com
項(xiàng)目使用   /api/abc.do 這樣去調(diào)取接口
2 本地配置host  修改host為你訪問(wèn)的接口  然后域名訪問(wèn)項(xiàng)目  xxx   yyy 百度即可很簡(jiǎn)單

2017年12月6日 17:19

編輯回答

掛念你

謝邀！首先錯(cuò)誤信息是服務(wù)器端頭部匹配時(shí)出現(xiàn)不匹配現(xiàn)象，即未設(shè)置Access-Control-Allow-Origin。
解決跨域一般采用下面幾種方法：

1.JSONP方式解決跨域問(wèn)題
jsonp解決跨域問(wèn)題是一個(gè)比較古老的方案(實(shí)際中不推薦使用)，其中jsonp只能是“GET”請(qǐng)求,不能進(jìn)行較為復(fù)雜的POST和其它請(qǐng)求。

2.CORS解決跨域問(wèn)題
CORS需要瀏覽器和服務(wù)器同時(shí)支持。其中通信的關(guān)鍵是服務(wù)器，要想跨源通信，服務(wù)器必須實(shí)現(xiàn)CORS接口。

3.代理請(qǐng)求方式解決接口跨域問(wèn)題
代理請(qǐng)求主要是對(duì)接口進(jìn)行代理，前端ajax請(qǐng)求的是本地接口，本地接口接收到請(qǐng)求后向?qū)嶋H的接口請(qǐng)求數(shù)據(jù)，然后再將信息返回給前端，node.js即可代理。

4.瀏覽器插件
谷歌瀏覽器跨域插件：Allow-Control-Allow-Origin

2018年8月6日 09:02

編輯回答