我正在運行一個 nginx 網路服務器來為我的應用程式提供服務，并且在我的前端和 express 后端之間我有一個 nginx 反向代理。當我單擊立即付款按鈕提交時，我收到 405 錯誤，沒有任何訊息。查看 devtools 顯示以下內容，請求 url 嚴重不正確：
為什么請求 url 第二次附加 url？在客戶端上，我將 axios 配置為：
const apiClient = axios.create({
baseURL: "goldcoastcookiecompany.com", // http://localhost:5000
withCredentials: true,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Referrer-Policy": "no-referrer-when-downgrade",
"Access-Control-Allow-Origin": "goldcoastcookiecompany.com", // http://localhost:8080
"Access-Control-Allow-Methods": "GET, POST, DELETE, OPTIONS"
}
});
在后端，表達 cors 中間件：
app.use(cors({ credentials: true, origin: 'goldcoastcookiecompany.com' })) // http://localhost:8080 in dev
路線：
router
.route('/create-payment-intent')
.post(express.json(), OrdersController.apiCreatePaymentIntent)
Nginx 網路服務器配置：
#### HTTP - redirect all traffic to HTTPS
server {
listen 80;
listen [::]:80 default_server ipv6only=on;
return 301 https://$host$request_uri;
}
#### HTTPS - proxy all requests to Node app
server {
#ENABLE HTTP/2
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name goldcoastcookiecompany.com;
#### USE LETSENCRYPT CERTIFICATES
ssl_certificate ....
ssl_certificate_key ....
#### INCLUDE THE SSL CONFIGURATION FROM CIPHERLI.ST
include snippets/ssl-params.conf;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Host $host;
proxy_pass http://localhost:8080;
proxy_ssl_session_reuse off;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
}
和 nginx 反向代理：
server {
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwared-Proto $scheme;
proxy_pass http://localhost:5000;
}
}
這似乎不是 CORS 問題，如何以及為什么將 :path 添加到應該是https://goldcoastcookiecompany.com/create-payment-intent的請求 url 中。從我讀過的內容來看，這是一個后端問題，不一定是前端問題。我搜索的大部分內容是關于 405 方法未找到或 cors，但沒有關于 405 沒有錯誤訊息。
uj5u.com熱心網友回復：
當您設定baseURL: "goldcoastcookiecompany.com"，并且瀏覽器 URL 為https://goldcoastcookiecompany.com/時，通過 axios，請求 URL 變為goldcoastcookiecompany.com/create-payment-intent但這不是一個有效的 URL，因為它沒有協議。這只是一條路。
然后，當 axios 使用 XHR 或 ajax 發送該請求時，瀏覽器會看到沒有協議，它不是 URL，并假設您要提交相對于您當前所在地址的請求，然后將您當前的視窗 URL 添加到開頭其中，你得到windowURL baseURL requestPath的是 https://goldcoastcookiecompany.com/goldcoastcookiecompany.com/create-payment-intent
長話短說：
baseURL: "https://goldcoastcookiecompany.com/",
或者，如果您希望它與域相關：
baseURL: "/",
當打開https://example.com/asd/asd/并請求test.html時，最終 URL 變為https://example.com/test.html
編輯：原來，這是 nginx 配置的問題。他使用第一個 nginx 配置為前端提供服務，它將所有內容轉發到前端，而無法轉發到 nodejs 后端服務器。所以它正在發布到前端。相反，我們添加了這個位置塊：
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:5000/;
}
在客戶端，相應地更改了 API URL。我們這樣做是為了讓 nginx 可以了解請求是否應該代理到前端或后端服務器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/508513.html