Angular + Nodejs Express：错误跨域请求被阻止：同源策略不允许读取远程资源

Posted 2023-03-04

【中文标题】Angular + Nodejs Express：错误跨域请求被阻止：同源策略不允许读取远程资源

【英文标题】：Angular + Nodejs Express: ERROR Cross-Origin Request Blocked: Same Origin Policy disallows reading the remote resource at

【发布时间】：2021-12-19 00:01:27

【问题描述】：

我正在尝试将数据从 angular（端口 4200）发布到端口 3000 上的后端 node.js express 服务器。

到目前为止我做了什么：我尝试将 json 数据从 angular 发布到 httpbin.org（用于测试的第 3 方服务器），这证明了我在 angular 中的功能可以发布json数据。

另外，我使用 angular 从其他网站的 API 获取数据，它们都可以工作，只有托管在端口 3000 上的 nodejs 服务器在将数据从 angular 发布到它时存在 CORS 问题。

我一直在谷歌上搜索更改 nodejs 服务器的 cors 标头，并检查了防火墙和许多其他方法，但没有任何效果，我总是收到 CORS 错误。

**Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:3000/api/postData. (Reason: CORS request did not succeed).**

**ERROR:**
Object  headers: …, status: 0, statusText: "Unknown Error", url: "http://127.0.0.1:3000/api/postData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://127.0.0.1:3000/api/postData: 0 Unknown Error", error: error 
​
error: error  target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … 
​
headers: Object  normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) 
​
message: "Http failure response for http://127.0.0.1:3000/api/postData: 0 Unknown Error"
​
name: "HttpErrorResponse"
​
ok: false
​
status: 0
​
statusText: "Unknown Error"
​
url: "http://127.0.0.1:3000/api/postData"
​
<prototype>: Object  … 

Angular 文件：compoent.ts

getData(loc : any) 
  
    //angular --> nodejs
    const headers = new HttpHeaders()
          .set('Authorization', 'my-auth-token')
          .set('Content-Type', 'application/json');

    this.http.post<any>("http://127.0.0.1:3000/api/postData", JSON.stringify(loc)).subscribe(response =>
      console.log(response);
    ); 

我尝试了各种可以在 Internet 上找到的 Nodejs 文件中的标头和 cors，但没有任何效果：app.js

const express = require('express')
const app = express()
const port = 3000
const cors = require('cors')
app.options('*', cors()) // include before other routes 
//app.use(cors())

const corsOpts = 
    origin: '127.0.0.1:3000',
  
    methods: [
      'GET',
      'POST',
    ],
  
    allowedHeaders: [
      'Content-Type',
    ],
  ;
  
  app.use(cors(corsOpts));

app.use(function(req, res, next) 
    // res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // next();
    // Website you wish to allow to connect
    res.header('Access-Control-Allow-Origin', '127.0.0.1:3000');
    

    // Request methods you wish to allow
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.header('Access-Control-Allow-Headers', 'Accept, Content-Type, X-Requested-With', 'X-HTTP-Method-Override');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.header('Access-Control-Allow-Credentials', true);

    if (req.method === 'OPTIONS') 
        res.sendStatus(200);
     else 
        next();
    
    );

app.use(
    cors(
      allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
      exposedHeaders: ["authorization"], // you can change the headers
      origin: "*",
      methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
      preflightContinue: false
    )
  );

app.get('/', (req, res, next) => 
    res.send("wtffffffffffffffffff");//send to the page
)

app.get('/getAPIResponse', (req, res, next) => 
    api_helper.make_API_call('https://jsonplaceholder.typicode.com/posts')
    .then(response => 
        res.json(response)
    )
    .catch(error => 
        res.send(error)
    )
)

//angular --> nodejs
app.post('/api/postData',cors(), (req, res, next) => 
    console.log("/postData success when running ng serve");
    console.log(req.body);    
)

app.listen(port, () => console.log(`NodeJS App listening on port $port!`))

这是代理文件：proxy.conf.json

    
    "/api/*": 
      "target": "http://127.0.0.1:3000",
      "pathRewrite": "^/api" : "",
      "secure" : false,
      "changeOrigin" : true
    
  

【问题讨论】：

您似乎在节点端的多个地方都有不正确的来源。原始 url 应该是你的 angular url (localhost:4200) 而不是你现在的 api url。

@MikeOne 感谢您的回复，但我不明白您的话，post方法在app.js文件的最后一部分，您的意思是我应该更改此方法“app.post ('/api/postData',cors(), (req, res, next)"？我应该如何更改它？这两个 app.get() 用于我的 node.js 测试，以确保我的 nodejs工作正常

这是你的 cors 配置和其他标题。像 corsOpts = origin: '127.0.0.1:3000' 和 res.header('Access-Control-Allow-Origin', '127.0.0.1:3000');这些都不正确。

@MikeOne 我将它们更改为 4200 但仍然是同样的问题。

您实际上是在混淆两种不同的方法。 CORS 是一种解决方案。使用代理配置是另一回事。做一个或另一个，而不是两个！

【参考方案1】：

问题很简单：我没有在后端运行nodejs服务器

【讨论】：

您需要配置 Node 后端以允许来自其他来源的请求。查看文档here

您需要配置 Node 后端以允许来自其他来源的请求。查看文档here

【参考方案2】：

来自docs

简单用法（启用所有 CORS 请求）

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) 
  res.json(msg: 'This is CORS-enabled for all origins!')
)

app.listen(80, function () 
  console.log('CORS-enabled web server listening on port 80')
)

首先让基本的 CORS 设置正常工作，然后考虑使用一些 CORS 配置来解决问题。

如果您使用 CORS，请同时删除您的代理配置。如果使用 CORS，则直接从 FE（浏览器）向您的 BE 服务器发出 HTTP 请求。

【讨论】：

我试过这个并删除了代理文件，但它不起作用，仍然是CORS错误，127.0.0.1:3000/api/postData的Http失败响应：0未知错误“，为什么会出现这个未知错误，是不是因为的cors？

听起来不像 - 尝试使用 localhost 而不是 127.0.0.1？如果这不起作用，则添加 express 404 处理程序和 500 错误处理程序 - 看看它是否甚至击中你的服务器 - 在使用 app.get app.post 等时也总是返回 res.json(some:'json')

angular运行时能否从浏览器访问nodejs？我试图在cmd中运行nodejs，但是在运行angular时失败了，是这个原因吗？

是的，你需要同时运行 Angular 和节点服务器 - 为此使用 2 个不同的终端窗口