如何使 NODE 在公共 ip 地址網站上工作？

Question

我在 html 中有以下表格，我通過以下方式將其數據傳遞到 JavaScript 中：

<input type="text" class="form-control" id="input01" name="job_title" placeholder="Enter a job title (e.g. Engineering)"> 
<button class="btn btn-primary ml-auto" id="form_submit_button">Search</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript" src="parser.js"></script>

(function($){
    "use strict";
    jQuery(document).ready(function($) {
        var $this = $(window);
        $("#form_submit_button").on("click", function () {
            //GET VALUES FROM USER INPUT AND STORE IN VARIABLES
            var job_title = $("#input01").val();
            
            var jsonObjects = JSON.stringify({
                job_title
            });
            console.log(jsonObjects);
            
            //PASS DATA INTO NODE VIA HTTP POST REQUEST
            const xhr = new XMLHttpRequest();

            xhr.setRequestHeader('Content-Type', 'application/json');

            xhr.open(
                "POST", 
                "http://localhost:80/test01", 
                {
                    job_title,
                    job_country,
                    job_contract,
                    job_education
                }
            );
            
            xhr.send();
        });

    });
})();

當我假設我在輸入字段中添加了一些數據單擊按鈕時，程序會將信息傳遞到 JavaScript 但由於以下錯誤未觸發 http 請求：

{"job_title":"database"}
Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
    at HTMLButtonElement.<anonymous> (http://public-ip-address/test/parser.js:26:17)
    at HTMLButtonElement.dispatch (http://public-ip-address/test/scripts/jquery/jquery.min.js:2:43090)
    at HTMLButtonElement.v.handle (http://public-ip-address/test/scripts/jquery/jquery.min.js:2:41074)

當我添加以下xhr.setRequestHeader('Content-Type', 'application/json'); 在xhr.open(...)下面會給出以下錯誤：

{"job_title":"database"}
Access to XMLHttpRequest at 'http://localhost/test01' from origin 'http://public-ip-address' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是節點：

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

app.get("/test01", (req, res) => {
    res.send("hello world");
})

app.listen(80, ()=> {
    console.log("\n    > Server running on port: 80");
});

我的網站使用我的公共 ip 地址托管在noip.com上。 但是我不能也不知道如何通過我的 URL 訪問我的節點服務器。 請注意， http://localhost:80/test01將在瀏覽器上顯示 hello world。

任何幫助將不勝感激，謝謝！

---

更新：

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

app.use(cors({
    origin: '*',
    optionsSuccessStatus: 200,
}));

app.get("/test01", (req, res) => {
    res.send("hello world");
})

app.listen(80, ()=> {
    console.log("\n    > Server running on port: 80");
});

更新后瀏覽器出現錯誤

POST http://localhost/test01 404 (Not Found)
(anonymous) @ parser.js:39
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

Answer 1

您需要配置 CORS 接頭。 您可以使用 cors npm package 輕松完成此操作。

const cors = require('cors');

app.use(cors({
  origin: '*',
  optionsSuccessStatus: 200,
}));

編輯：確保在您的路線之前添加它