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

Question

我正在尝试将数据从 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
    }
  }

Answer 1

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

Answer 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 请求。