【跨域请求】【前端】什么是CORS，教你解决跨域问题
2023-03-08 21:57 作者:目标力扣Knight | 我要投稿
跨域请求原理模拟以及解决
项目文件结构
├── bin ├── index.html ├── index.js ├── node_modules ├── package-lock.json ├── package.json ├── public ├── routes └── views
整体思路
90端口是客户端，91端口是服务端。在模拟跨域时，使用浏览器访问了90端口，而90端口返回的H5文件中包含了请求91页面的脚本
此时由于本地IP相同端口不同，发生了跨域现象；
- 方案一，通过在服务器端修改响应头实现允许跨域
- 配置js文件
D:\BaiduSyncdisk\Frontend\nodejsPro\index.js
var express = require('express');
var app = express();
app.use(express.static(__dirname));
app.listen(90);
var app2 = express();
app2.get('/', function(req, res){
// 1. 修改响应头。是服务端配置允许同源策略吗？
res.header('Access-Control-Allow-Origin', '*');
res.send("您好");
})
app2.listen(91);
- 修改默认响应页面的脚本
D:\BaiduSyncdisk\Frontend\nodejsPro\index.html
<body>
<h4>Hello everyone!</h4>
<script>
fetch("http://localhost:91/").then(res=>res.text()).then(data=>{alert(data)})
</script>
</body>
- 方案二: JSON, 即利用H5中开放策略的
script标签捕获其他页面的JS脚本 - H5页面编写函数和跨域脚本
D:\BaiduSyncdisk\Frontend\nodejsPro\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>Hello everyone!</h4>
<script>
function f(data) {
alert(data);
console.log(typeof data);
}
</script>
<script src="http://localhost:91?callback=f"></script>
</body>
</html>
- 服务端定制回调参数
D:\BaiduSyncdisk\Frontend\nodejsPro\index.js
var express = require('express');
// 90端口是客户端，91端口是服务端。在模拟跨域时，使用浏览器访问了90端口，而90端口返回的H5文件中包含了请求91页面的脚本
// 此时由于本地IP相同端口不同，发生了跨域现象；
var app = express();
app.use(express.static(__dirname));
app.listen(90);
var app2 = express();
app2.get('/', function(req, res){
var funcname = req.query.callback;
res.send(funcname + "('您好')");
})
app2.listen(91);
- 参考与引用
# 创建NodeJS项目 https://www.cnblogs.com/chongsaid/p/nodejs_getStart.html # Jsonp定义 https://zh.wikipedia.org/wiki/JSONP
- 121
