NodeJS解决跨域问题
如需转载请标明出处
QQ技术交流群：129518033
### 文章目录* NodeJS解决跨域问题
环境：
nodejs : 12.13.0
前言
先来介绍一下什么是跨域。
跨域资源共享(CORS) 是一种允许当前域的资源被其他域(不同的域、协议或端口)的脚本请求访问的机制，一般情况下浏览器会禁止跨域请求。
那么，我们该怎么合理的请求跨域问题呢？下面，我们以NodeJS为例，分别介绍如何解决原生http服务、express、koa2的跨域问题
1.问题复现
html测试代码(测试时注意勾选F12-Network-Disable cache)
'use strict';
var express = require('express');
var app = express();
app.all('*', function (req, res, next) {
// 开发环境设置，生产环境谨慎使用
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
if (req.method === 'OPTIONS') {
res.send(200);
} else {
next();
}
});
app.get('/', function (req, res) {
res.status(200).send('hello itas109');
});
app.listen(8080);
错误信息
Access to XMLHttpRequest at 'http://127.0.0.1:8080/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2.NodeJS原生服务解决
代码：
'use strict';
const http = require('http');
http.createServer((req, res) => {
// 开发环境设置，生产环境谨慎使用
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.end('hello itas109');
}).listen(8080);
3.express框架解决
3.1 手动方式
'use strict';
var Koa = require('koa');//koa2
var router = require('koa-router')();//https://github.com/ZijianHe/koa-router
var app = new Koa();
app.use(async (ctx, next) => {
// 开发环境设置，生产环境谨慎使用
ctx.set("Access-Control-Allow-Origin", "*");
ctx.set("Access-Control-Allow-Headers", "X-Requested-With");
ctx.set("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
if (ctx.method == 'OPTIONS') {
ctx.body = '';
ctx.status = 200;
} else {
await next();
}
});
router.get('/', async (ctx, next) => {
ctx.body = 'hello itas109';
});
app.use(router.routes());
app.listen(8080);
3.2 cors插件方式
'use strict';
var express = require('express');
var cors = require('cors');
var app = express();
// 开发环境设置，生产环境需要配置安全的参数
app.use(cors());
app.get('/', function (req, res) {
res.status(200).send('hello itas109');
});
app.listen(8080);
4.koa2框架解决
4.1 手动方式
'use strict';
var Koa = require('koa');//koa2
var router = require('koa-router')();//https://github.com/ZijianHe/koa-router
var app = new Koa();
app.use(async (ctx, next) => {
// 开发环境设置，生产环境谨慎使用
ctx.set("Access-Control-Allow-Origin", "*");
ctx.set("Access-Control-Allow-Headers", "X-Requested-With");
ctx.set("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
if (ctx.method == 'OPTIONS') {
ctx.body = '';
ctx.status = 200;
} else {
await next();
}
});
router.get('/', async (ctx, next) => {
ctx.body = 'hello itas109';
});
app.use(router.routes());
app.listen(8080);
4.2 koa-cors插件方式
'use strict';
var Koa = require('koa');//koa2
var router = require('koa-router')();//https://github.com/ZijianHe/koa-router
var cors = require('koa-cors');//https://github.com/evert0n/koa-cors
var app = new Koa();
// 开发环境设置，生产环境需要配置安全的参数
app.use(cors());
router.get('/', async (ctx, next) => {
ctx.body = 'hello itas109';
});
app.use(router.routes());
app.listen(8080);
License
License under CC BY-NC-ND 4.0: 署名-非商业使用-禁止演绎
Reference:
NULL
