跨域
概念
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
所谓同源,是指域名(IP)、协议(http:80/https:443)、端口(8080)均相同
ajax不允许跨域访问,只能同域访问。
如何解决跨域
一:CORS
允许跨域访问(最简单),在服务器端加一个响应头操作(允许跨域操作)
- 服务器告诉浏览器可以跨域设置响应头
//设置响应头,要在app.use('/', indexRouter);的前面设置
app.use('/*',function(req,res,next){
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept"); // 服务器支持的头信息
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); // 允许的方法
next();
})
操作:
<body>
<h1>页面1</h1>
<button id="btn">点击</button>
<!-- <img src="http://localhost:3003/images/12.jpg" alt=""> -->
<script src="./layui/layui.js"></script>
<script>
layui.define(function () {
let {$} = layui;
$("#btn").click(function(){
$.ajax({
type:"get",
url:"http://localhost:3003/users",
success(res){
console.log(res);
}
})
})
})
</script>
</body>
二:代理服务器
用的最多,配置代理
写在app.js里面,写在浏览器访问的服务器作为代理服务器去访问其他服务器
用的express插件,下载插件:npm i http-proxy-middleware
1. 引入
//引入创建中间件
const {createProxyMiddleware } = require('http-proxy-middleware');
2.配置代理
注:要放在var app = express();
前面
// 配置代理
const restream = function(proxyReq, req, res, options) {
if (req.body) {
let bodyData = JSON.stringify(req.body);
// incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
proxyReq.setHeader('Content-Type','application/json');
proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
// stream the content
proxyReq.write(bodyData);
}
}
const options = {
target: 'http://localhost:3003', // 目标服务器的 host
changeOrigin: true, // 默认 false,是否需要改变原始主机头为目标 URL
pathRewrite: { // 重写请求
'^/api': '/', // 所有以 "/api" 开头的请求,"/api" 都会重写为 "/"
},
onProxyReq:restream
}
3.编写路由
// 设置访问代理的路由,该行代码必须写在 var app = express(); 之后
app.use('/api', createProxyMiddleware(options));
4.调用ajax
$.ajax({
type:"get",
url:"/api/users",
success(res){
console.log(res);
}
})
5.代理的3003服务器
//代理服务器
router.get('/', function(req, res, next) {
res.send('respond 资源222');
});
三:JSONP
面试中:(问的最多,用的最少)
JSONP不是ajax所以不存在跨域问题,
JSONP:(JSON with padding)
-
浏览器通过spcrit标签向服务器发起请求,
//浏览器通过spcrit标签向服务器发起请求 <script src="http://localhost:3003/users"></script>
//ajax里面使用jsonp方法 $.ajax({ type:"get", url:"http://localhost:3003/users", dataType:"jsonp", //数据类型 jsonpCallback:"callback", //后面得名字 success(res){ console.log(res); } })
-
服务器把返回的消息外面包裹一个可执行得函数,
//不能用post方法,只能用get方法 router.get('/', function(req, res, next) { res.send('callback("respond 资源111")'); });
-
浏览器接收到服务器返回得消息后执行这个函数,从而得到里面得数据
//先执行后引用 <script> function callback(res){ console.log(res); } </script>
缺点:
只能用get提交,不能做增删改查