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

【问题标题】：access to xmlhttprequest from origin http://localhost:3000 has been blocked due to CORS policy由于 CORS 策略，从源 http://localhost:3000 访问 xmlhttprequest 已被阻止
【发布时间】：2021-04-12 07:42:36
【问题描述】：

我已经为我正在开发的应用程序设置了前端和后端，我想测试从前端到后端发送的 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())

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

【问题讨论】：

基本原因是您无法通过 JavaScript 从一个域：端口向另一个域发出请求。然而，有办法允许这样做。
1.使用CRA 生成应用程序并将"proxy": "http://localhost:8765" 添加到您的package.json 文件中。这将代理请求，忽略 CORS 问题。 2. 使用--disable-web-security 启动 Chrome，虽然这会起作用，但我真的不建议这样做 3. 配置您的本地服务器以允许 CORS，有很多这样的例子，例如positronx.io/express-cors-tutorial第一个选项最简单，但你可以尝试设置Access-Control-Allow-Origin, '*'
您的错误基本上是因为您忘记在您的axios.get 方法调用中添加协议http。请求将是axios.get('http://localhost:8765/...')。
作为参考，请在此处查看此帖子，因为我之前遇到过同样的问题：stackoverflow.com/questions/46258449/…

标签： node.js reactjs express

【解决方案1】：

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

【讨论】：