由于 CORS 策略，从源 http://localhost:3000 访问 xmlhttprequest 已被阻止

问题描述

我为我正在开发的应用程序设置了前端和后端，我想测试从前端到后端发送的 http 请求，而这两个请求在 localhost 中运行。

使用 React 发送代码请求：

 async componentDidMount(){
           const {data: posts}= await axios.get("localhost:8765/...");
       }

使用 Express 的应用服务器代码：

const express = require('express')
const app = express()
require('./routes/...')(app)

app.listen(8765,() => {
    console.log("Server is listening on port 8765.")
})

前端在 localhost 3000 上运行。

这是我得到的错误：

Access to XMLHttpRequest at 'localhost:8765/...' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Cross origin requests are only supported for protocol 
schemes: http,data,chrome,chrome-extension,chrome-untrusted,https.

我尝试了网上找到的各种解决方案，例如：

var cors = require('cors');

app.use(cors({origin: 'http://localhost:3000'}));

或：

app.use(function (req,res,next) {

    
    res.setHeader('Access-Control-Allow-Origin','http://localhost:8888');

    
    res.setHeader('Access-Control-Allow-Methods','GET,POST,OPTIONS,PUT,PATCH,DELETE');

    
    res.setHeader('Access-Control-Allow-Headers','X-Requested-With,content-type');

    
    res.setHeader('Access-Control-Allow-Credentials',true);

    
    next();
});

或：

app.use(cors())

虽然似乎没有任何效果，但我仍然遇到同样的错误，而且我已经被困在这个问题上很长一段时间了。有什么想法吗？

解决方法

只需使用 res.setHeader('Access-Control-Allow-Origin','*');

express reactjs reactjs