React+Axios请求遇CORS问题：能否从客户端解决及方案咨询

先贴出你的代码：

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Test = () => {
  const [data, setData] = useState()
  useEffect(() => {
    const fetchData = async () => {
      const url = 'https://test.secure.app/api'
      const response = await axios.get(url)
      console.log('Response', response)
      console.log('Data', response.data)

      const jsonData = response.json()
      console.log('jsonData', jsonData)
      setData(jsonData)
    }

    fetchData()
  }, [])

  return <> {data} </>
}

export default Test

执行代码时遇到的错误：

Error: Access to XMLHttpRequest at 'https://test.secure.app/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

首先明确：纯前端直接绕过CORS是受浏览器安全机制限制的，但开发阶段可以通过以下几种客户端侧方法临时解决：

1. 用浏览器插件临时禁用CORS检查 #

• 比如Chrome的「Allow CORS: Access-Control-Allow-Origin」类插件，安装后开启就能跳过浏览器的CORS限制。
• 注意：仅适用于本地调试，绝对不能用于生产环境，会暴露安全风险。

2. 配置React开发服务器代理（推荐） #

在项目的package.json中添加代理配置：

"proxy": "https://test.secure.app"

然后修改请求URL为相对路径：

const url = '/api'

原理是让React开发服务器作为中间层转发请求——服务器端请求不受浏览器CORS限制。重启开发服务器后即可生效，该方法仅适用于开发阶段。

3. 手动配置本地反向代理 #

用http-proxy-middleware自定义代理规则：

1. 安装依赖：

npm install http-proxy-middleware --save-dev

2. 在项目src目录下创建setupProxy.js文件，写入：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://test.secure.app',
      changeOrigin: true,
    })
  );
};

3. 修改请求URL为'/api'，重启开发服务器即可。

额外提醒：你的代码还有一处错误 #

axios的get请求会自动将响应解析为JSON，不需要再调用response.json()，这行代码会报错，直接用response.data即可：

// 错误写法
const jsonData = response.json()
// 正确写法
const jsonData = response.data

内容的提问来源于stack exchange，提问作者Anusha Madamanchi