目录
跨域
1. 简介
什么是跨域调用?
当前地址与要调用的目标地址中的协议、主机名、端口号有一个不一致就发生跨域调用,这是因为浏览器的同源策略限制所导致。
怎样解决跨域调用?
第一种:在服务端设置允许跨域调用的响应头信息
res.header('Access-Control-Allow-Origin', '*'); //开启允许跨域调用
res.header('Access-Control-Allow-Methods', '*'); //所有请求方式都允许跨域调用
或者
使用第三方cors中间件来设置允许跨域调用
在项目根目录中安装cors: npm i cors
const cors = require('cors') //导入中间件
app.use(cors()); //使用第三方cors中间件设置允许跨域调用
第二种:使用JSONP来设置跨域调用
什么是JSONP?
JSONP不属于ajax技术,属于javascript技术,它是利用<img>标签 、<script>标签等中的src属性可以跨域调用的特性来调用服务端的程序,并传入一个回调函数来获取服务端返回的数据。
JSONP的缺点:只能发送get方式的请求、不支持post请求
前端代码如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// function fn(d) {
// console.log(d, 3333);
// }
var fn = function(data) {
console.log(data, 1111);
}
</script>
<script src="http://localhost:3000/my_jsonp?calls=fn"></script>
</head>
服务端代码如下:
const express = require('express');
const path = require('path');
const app = express();
app.listen(3000, () => {
console.log('3000端口');
});
app.use(express.urlencoded({ extended: false }));
//设置ejs:
app.set('view engine', 'ejs'); //设置模板引擎为ejs
app.set('views', [`${path.join(__dirname,'views')}`]); //设置模板文件的存放位置
app.engine('html', require('ejs').__express); //将html文件作为ejs模板文件来解析
//测试JSONP:
app.get('/my_jsonp', (req, res) => {
let calls = req.query.calls ? req.query.calls : '';
// console.log(calls, 999);
// res.send('jsonp技术');
res.send(`${calls}('jsonp技术')`)
});
跨域种类
跨域错误
2. CORS解决跨域
2.1 配置cors
1.2.1.1 Access-Control-Allow-Origin
语法:
res.header('Access-Control-Allow-Origin', '*');
描述:默认情况下只能用域发送ajax请求。此属性可以设置 哪个来源( url )可以请求 。常常设置为 *
2.1.2 Access-Control-Allow-Methods
语法
res.header('Access-Control-Allow-Methods', '*');
描述:默认情况下,CORS 仅支持客户端发起 GET、POST 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。
2.2 cors中间件
(1)运行 npm install cors 安装中间件
(2)使用 const cors = require('cors') 导入中间件
(3)在路由之前调用 app.use(cors()) 配置中间件