nodejs express 允许跨域设置

文章参考

1. 跨域通配符*与include报错,The value of the 'Access-Control-Allow-Origin' header '*'

 

为了模拟向后台发送请求,需要搭建一个web工程的demo,使用nodejs 的express 模拟web工程

 

var express = require("express");
var http = require("http");
var app = express();

// 获取post过来的数据 /
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));

// 设置模板 /
var ejs = require("ejs");
//使用set方法,为系统变量“views”和“view engine”指定值。
app.set("views", __dirname + "/views");
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', ejs.__express);

// 利用文件来拆分路由的规模 /
var router = express.Router();
var router1 =  require('./routes/router1');
var router2 =  require('./routes/router2');
var router3 =  require('./routes/router3');
var testRouter =  require('./routes/test/test');
var sqhIndex =  require('./routes/sqh/sqhIndex');
var klwIndex =  require('./routes/klw/klwIndex');


//设置web工程的根目录
app.use(express.static(__dirname + '/'));

// 允许跨域
app.all('*', function(req, res, next) {
  console.log(req.headers.origin)
  console.log(req.environ)
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  // res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials","true");
  res.header("X-Powered-By",' 3.2.1')
  if(req.method === "OPTIONS") res.send(200);/*让options请求快速返回*/
  else  next();
});


app.use('/router1', router1);
app.use('/router2', router2);
app.use('/router3', router3);
app.use('/test', testRouter);
app.use('/sqh', sqhIndex);
app.use('/klw', klwIndex);


http.createServer(app).listen(3000);

 

注意:

1. 需要将允许跨域的请求代码放在所有的路由前面,因为请求被express接受到的时候,拦截的顺序是根据自己写的代码路由顺序决定的,一旦满足拦截条件,如果不执行next()方法,则就不会继续把请求发送给下一个路由拦截器。

2. `  res.header("Access-Control-Allow-Origin", req.headers.origin);`不能使用 *, 否则协议不通过

 

 

在 Node.js 中解决跨域问题,可以通过设置 HTTP 响应头来实现。以下是两种常用的解决方式: 1. 使用 `cors` 模块 `cors` 模块可以帮助我们设置跨域响应头,使用起来非常简单。首先需要安装 `cors` 模块: ``` npm install cors ``` 然后在服务端代码中引入 `cors` 模块并设置相应的响应头即可: ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 下面是你的API代码 // ... app.listen(3000, () => { console.log('Server is running on port 3000.'); }); ``` 2. 手动设置响应头 在服务端代码中手动设置跨域响应头也是一种常用的方式。可以在 HTTP 响应中添加以下头信息: - `Access-Control-Allow-Origin`: 允许跨域请求的源地址,可以设置为 `*`,表示允许所有地址跨域请求。 - `Access-Control-Allow-Methods`: 允许跨域请求的 HTTP 方法。 - `Access-Control-Allow-Headers`: 允许跨域请求的头信息。 以下是一个示例代码: ```javascript const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); // 下面是你的API代码 // ... app.listen(3000, () => { console.log('Server is running on port 3000.'); }); ``` 以上两种方式都可以解决跨域问题,选择哪种方式取决于你的具体需求。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值