javascript 前端 网络协议 Node.js使用CORS解决跨域问题的三种方法

目录

1、通过CORS中间键解决2、设置响应头3、app.all解决4、解决跨域问题案例

现如今，实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS. JSONP:出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持GET请求，不支持POST请求。 CORS:出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼容某些低版本的浏览器。 在这里我主要介绍CORS三种解决跨域的方法。

1、通过CORS中间键解决

在命令行中输入 npm i cors

下载cors中间键 导入并调用 //导入cors包

const cors = require('cors')

//调用

app.use(cors())

2、设置响应头

Access-Control-Allow-Origin，标识允许哪个域的请求，设置*是最简单粗暴的，允许所有域的请求，不过不安全，一般只有在学习阶段使用，方便快捷。 res.setHeader("Access-Control-Allow-Origin", "*");

3、app.all解决

此方面比前面两种方法更加全面 app.all('*', function (req, res, next) {

res.header("Access-Control-Allow-Origin", "*");

res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');

res.header("Access-Control-Allow-Headers", "X-Requested-With");

res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);

next();

});

4、解决跨域问题案例

这里主要采用第一种，其他两种方式可自行测试。

代码示例：

1.HTML文件

2.使用express框架

// 导入express包

const express = require('express')

//导入cors包

const cors = require('cors')

// 创建应用对象

const app = express()

// 使用cors包解决跨域问题

app.use(cors())

// 设置路由规则

app.post('/login',(req,res)=>{

res.end('登录成功')

})

// 监听端口，启动服务

app.listen(9000,()=>{

console.log('服务已启动，监听9000端口中......');

})

精彩文章

 您阅读本篇文章共花了：