logo陈三

React.js 跨域开发

by 陈三 on 
主题:  React.js

我们使用 React.js 开发单页面应用时,通常后端提供的 API 与前端开发服务器并不在同一个域(Origin)内,比如:

  • React.js 开发服务器运行在 localhost:3000
  • API 服务器运行在 localhost:4200

然后我们在浏览器控制台就会看到如下的错误提示:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4200/api/xxx. (Reason: CORS request did not succeed).

我们可以在 API 服务器定义 CORS 响应头来解决。

但如果最终部署时,前端文件跟后端 API 是在同一个域内的,定义 CORS 头则显得多余。我们有更好的解决方案。

create-react-app

如果你使用 create-react-app 开发 React 项目,则可以使用它的 proxy 功能。我们只需在 package.json 文件中新增一个字段:

{
  "proxy": "http://localhost:4200"
}

这样,React 项目中 API 请求会被转发到 http://localhost:4200,不再有跨域的问题。

CaddyServer

Caddy 是类似 nginx、Apache 的服务器软件,不过它远比其它同类软件简单。因此我们也可以在 React.js 项目中让它来代理 API 请求

在安装 Caddy 服务器后,新建一个 caddyfile,假定内容如下:

# Caddy 服务器运行的主机、端口
localhost:3002

# 假定 React 开发服务器运行在 localhost:3000 端口
proxy / http://localhost:3000
proxy /sockjs-node localhost:300 {
  websocket
}

# 将 /api 请求全部转发至 4200 端口
proxy /api http://localhost:4200

接着在命令行下启动 caddy:

$ caddy --conf ./caddyfile

随后我们就可以在 localhost:3002 访问 React.js 页面。caddy 会将 / 请求转发到 3000 端口,而 /api 请求则转发到 http://localhost:4200,一样解决了 React 跨域问题。