我有一個react用于axios從單獨的node服務器獲取資料的前端。前端使用.app帶有 SSL 證書的域，但后端使用http://localhost:3001普通 http、IP 地址和埠。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
...
axios({
method: 'GET',
url: 'http://localhost:3001/',
params: {page: pageNumber, limit: limit},
cancelToken: new axios.CancelToken(c => cancel = c)
}).then( res => {
setSermons( prevSermons => {
return [...new Set([...prevSermons, ...res.data.map( sermon => sermon )])]
})
setHasMore(res.data.length > 0)
setLoading(false)
}).catch( e => {
if (axios.isCancel(e)) return
setError(true)
})
return () => cancel()
}, [query, pageNumber, limit] )
...這是我的后端節點/快速服務器：
const express = require('express')
const cors = require('cors')
const knex = require('knex')
require('dotenv').config()
const db = knex({client: 'pg', connection: <...connection stuff...>})
const app = express()
app.use(express.urlencoded({ extended: false }))
app.use(express.json())
app.use(cors())
app.get('/', (req, res) => {
let page = req.query.page || 0
let limit = req.query.limit || 50
db.select('*')
.from('sermons')
.limit(limit, {skipBinding: true})
.offset(limit*page)
.then( (data) => {
res.json(data)
})
.catch( (err) => {
console.log(err)
})
})
const port = process.env.APP_PORT
app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}, http://localhost:${port}`));
我可以在瀏覽器上打開網站的前端和后端部分。后端可通過http://157.xxx.xxx.xxx:3001 IP 訪問，前端映射到我的域。但是前端無法從后端檢索資料。
所有這些都在nginx反向代理之后運行。我沒有發現服務器上安裝了任何防火墻。昨天它正在作業，但一夜之間連接被拒絕錯誤開始了。我知道以前，我將 localhost 完全排除在 nginx 設定之外。
似乎 CORS 不起作用，即使節點服務器正在匯入/使用它。我還能看什么來除錯這個？
uj5u.com熱心網友回復：
嘗試添加"proxy": "http://localhost:3001"到您的 package.json
它將代理您的后端并解決 CORS 問題。您可以在此博客文章中了解更多資訊：
https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
uj5u.com熱心網友回復：
聽起來確實像 Cors 問題，這是一個快速視頻，解釋了 cors 的作業原理
https://www.youtube.com/watch?v=4KHiSt0oLJ0&ab_channel=Fireship
嘗試在 package.json 中添加代理或設定這樣的標頭
res.setHeader('Access-Control-Allow-Origin', '*');
uj5u.com熱心網友回復：
結果我無法讓后端服務器與 http://localhost:3000 一起作業，但如果我使用 https 將它映射到真正的外部 API，它確實可以作業。這是有效的最終配置：
nginx.conf僅用于后端服務器的檔案。以前它沒有出現，nginx.conf因為我試圖使其成為僅限本地主機的端點。
server {
listen 443 ssl; # using port 3000 wont work on some wifi, so incoming is 443 (ssl)
# server_name 157.xxx.xxx.xxx; # gets blocked because mixed content http / https
server_name <app.mydomain.com>;
ssl_certificate /etc/letsencrypt/live/<app.mydomain.com>/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/<app.mydomain.com>/privkey.pem;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:3001; #<--- react-backend server listens on this port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
前端反應應用程式如何與axios后端對話。后端端點現在是 HTTPS，并為該<api.mydomain.com>子域提供了一個單獨的有效 SSL 證書：
axios({
method: 'GET',
mode: 'cors',
url: 'https://api.<mydomain.com>',
params: {page: pageNumber, limit: limit}, // { q: query, page: pageNumber },
更改我的node/express后端服務器端點
const express = require('express')
const knex = require('knex')
require('dotenv').config()
const cors = require('cors')
var corsOptions = {
origin: '*',
optionsSuccessStatus: 200
}
app.use(cors(corsOptions))
const db = knex({...config stuff})
app.get('/', (req, res) => {
db.select(... --> ...res.data)
res.setHeader('Acess-Control-Allow-Origin', '*');
})
const port = process.env.APP_PORT
app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}, http://localhost:${port}`));
我認為其中許多更改是不需要的，但這是通過 https 的作業狀態。
接下來，我將看看是否可以阻止除前端域之外的所有人訪問此后端。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/472206.html