带有CORS中间件的ExpressJS服务器上的CORS错误已经添加

发布于 2025-02-09 05:44:15 字数 1116 浏览 0 评论 0原文

我有一个在AWS Lightsail上托管的前端和Express JS服务器,该服务器将Ubuntu与Nginx一起使用。

服务器设置为反向代理。 配置


location /api/ { 
proxy_pass http://localhost:4000/api/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

这是我正在尝试从客户端发出发布请求(登录)以表达

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource 
at http://localhost:4000/api/users/login. (Reason: CORS request did not succeed). Status 
code: (null).

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

const corsOption = {origin: "http://18.193.59.75:80"};

app.options("/*", function(req, res, next){ 
  res.header('Access-Control-Allow-Origin', '*'); 
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 
  'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);});

//app.use(cors(corsOptions));
//app.options('*', cors(corsOptions));

I have a frontend and express js server hosted on aws lightsail that uses ubuntu with nginx.

The server is set as a reversed proxy. Here is the config


location /api/ { 
proxy_pass http://localhost:4000/api/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

I'm trying to make a post request (login) from client to express but I get this

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource 
at http://localhost:4000/api/users/login. (Reason: CORS request did not succeed). Status 
code: (null).

but I have enabled cors on my server in multiple ways but with no success

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

const corsOption = {origin: "http://18.193.59.75:80"};

app.options("/*", function(req, res, next){ 
  res.header('Access-Control-Allow-Origin', '*'); 
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 
  'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);});

//app.use(cors(corsOptions));
//app.options('*', cors(corsOptions));

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦幻的味道 2025-02-16 05:44:15

添加next()处理程序,如下所示,查看是否解决了您的问题。

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

// const corsOption = {origin: "http://18.193.59.75:80"};

var corsOptions = function(req, res, next){ 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 
    'Content-Type, Authorization, Content-Length, X-Requested-With');
     next();
}

app.use(corsOptions);

Add the next() handler as given below and see if resolves your issue.

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

// const corsOption = {origin: "http://18.193.59.75:80"};

var corsOptions = function(req, res, next){ 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 
    'Content-Type, Authorization, Content-Length, X-Requested-With');
     next();
}

app.use(corsOptions);
Spring初心 2025-02-16 05:44:15

我仍然在使用CORS上的移动设备上遇到问题,我删除了所有配置
'http:// localhost:4000'我的服务器正在运行但它在服务器上运行,因此要到达它,我必须称其为http://18.193.59.75/api/ Endpoint和NGINX将重定向到'http:// localhost:4000'带代理通行证。

这是我的nginx config

server {
  listen 80;
  listen [::]:80;

  server_name _;
  location / {
     root /var/www/website/client;
     try_files $uri /index.html;
  }

  location /api { 
      proxy_pass http://localhost:4000;
  }

和我的index.js

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

// var corsOptions = function(req, res, next){ 
//     res.header('Access-Control-Allow-Origin', '*'); 
//     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
//     res.header('Access-Control-Allow-Headers', 
//     'Content-Type, Authorization, Content-Length, X-Requested-With');
//      next();
// }

// app.use(corsOptions);

app.use(cors());

app.use(aux);

app.use(express.json());
app.use(express.urlencoded({extended: false}))


app.use('/api/appointments', require('./api/appointmnets'));
app.use('/api/users', require('./api/users'));

app.get('/test', (req, res) => {
    res.json({'test' : 'successed'})
})

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
    console.log(`App listens to port ${PORT}`);
})

const domain = 'http://18.193.59.75:80/api/';
const domain = 'http://localhost:80/api';    //wronge

I still had problems on mobile with cors and I erased all the config and did it all again just to realize that in my front-end I called
'http://localhost:4000' where my server was running but it was running on the server so to reach it I had to call it http://18.193.59.75/api/endpoint and the nginx will redirect to 'http://localhost:4000' with proxy pass.

here is my nginx config

server {
  listen 80;
  listen [::]:80;

  server_name _;
  location / {
     root /var/www/website/client;
     try_files $uri /index.html;
  }

  location /api { 
      proxy_pass http://localhost:4000;
  }

and my index.js from express

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

// var corsOptions = function(req, res, next){ 
//     res.header('Access-Control-Allow-Origin', '*'); 
//     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
//     res.header('Access-Control-Allow-Headers', 
//     'Content-Type, Authorization, Content-Length, X-Requested-With');
//      next();
// }

// app.use(corsOptions);

app.use(cors());

app.use(aux);

app.use(express.json());
app.use(express.urlencoded({extended: false}))


app.use('/api/appointments', require('./api/appointmnets'));
app.use('/api/users', require('./api/users'));

app.get('/test', (req, res) => {
    res.json({'test' : 'successed'})
})

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
    console.log(`App listens to port ${PORT}`);
})

and the domain that I use from front-end to call my express server

const domain = 'http://18.193.59.75:80/api/';
const domain = 'http://localhost:80/api';    //wronge
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文