react 中如何进行跨域处理?

Question

最近在学习react,想请问下react中有没有像vue一样能配置跨域请求接口数据的?如果可以进行,如何进行跨域请求?最好能详细点...

---

1.目前项目环境是自己搭建的,没有使用create-react-app脚手架,因为在使用脚手架搭建的过程中,出现了一些坑,所以果断舍弃了;
2.项目的接口数据是请求的豆瓣数据,使用的是fetch,但需要进行跨域;
3.已经了解了一些跨域配置,但是均没有实现,要么能跨域,返回200状态,但是请求回来的body是null,要么直接无法跨域操作;

Answer 1

如果你项目中使用了 Express 可以使用 express-http-proxy

// 安装
npm install express-http-proxy --save
// 使用
const express = require('express');
const proxy = require('express-http-proxy');

server.use('/api', proxy('https://xxxxxx.com/'));

顺便提一点，Fetch 发送请求默认是不带 cookie 的，你需要在 header 里加上 credentials: 'include'

Answer 2

首先，跨域这个问题，是纯前端无法解决的。
1 JSONP处理跨域，一般这个方法是为了兼容老版本ie，因为ie9及以下不能使用CORS，然而JSONP也需要后台支持才 可以。

2 服务器做重定向，或者代理，或者穿透等等技术，但这些都超越了前端的能力范围。

3 XMLHttpRequest。需要和后台进行请求头设置，具体方法可以百度

综上所述，跨域问题与框架无关，也不是前端能独立解决的，所以建议题主去找后端大哥商量一下

Answer 3

跨域和react框架没有关系。 fetch返回的数据需要response.json()一下不知道你有这样没有？ 或者使用其他的组件试试 比如说jsonpaxios

Answer 4

自己配置服务器
webpack配置
proxyTable

Answer 5

fetch(url, {
        method: "POST",
  mode: "no-cors",//可以在这设置跨域
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "请求参数"
        }).then(function(res) {
 console.log("Response succeeded?", JSON.stringify(res.ok));
 console.log(JSON.stringify(res));
}).catch(function(e) {
 console.log("fetch fail", JSON.stringify(params));
}); 

Answer 6

webpack的proxy就可以了。

你的项目是create-react-app创建的就可以在package.json中添加proxy,如下：

{
  // ...
  "proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
      // ...
    }
  }
  // ...
}

Answer 7

跨域与否和你用的框架无关，这应该包装一个单独的模块来处理，既然你用了fetch，有一个库叫fetch-jsonp，github上自己去找。建议你抽空去看看到底什么是跨域，前端跨域的方法有哪些，补充一下知识