基于前后端的跨域解决示例
标签： 基于前后端的跨域解决示例 博客 51CTO博客
2023-05-15 18:24:06 178浏览
在浏览器中，只要发送请求的URL的协议，域名，端口，这三者中的任意一者与当前页面地址不同，则称之为跨域，在了解跨域之前，先来了解浏览器的同源策略。
1，浏览器的同源策略
同源策略(Same Origin Policy) 是一种安全约定，是所有主流浏览器最核心，也是最基本的安全功能之一，同源策略规定:
在没有明确授权的情况下，不同域的客户端脚本不能请求对方的资源，“同源”指:协议，域名，端口都要相同，只要有一个不相同，则是非同源。
浏览器在执行所有脚本时，都会检查该脚本属于那个页面，即检查是否同源，只有同源的脚本才会被执行；如果是非同源的脚本，则浏览器会报异常并拒绝访问。
2，Django中的跨域解决方法
跨域问题演示
我们先启动一个django server，服务监听在10.0.40.99 8080上,这个10.0.40.99是我本地的静态ip地址
访问其中编写的index路由，访问测试
现在我在10.0.0.57内网机上搭建一个nginx，编写一个location /cros用于测试跨域，这个页面有个按钮点击按钮后会向10.0.40.99:8080/index/ 发起请求
测试html文件内容
<html>
<body>
<button type="button" onclick="jump()">Click Me!</button>
<script>
function jump(){
let xhr = new XMLHttpRequest();
xhr.open('GET', "http://10.0.40.99:8080/index/", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
let response = JSON.parse(xhr.responseText);
console.log(response)
}
}
}
</script>
</body>
</html>
nginx配置
server{
location /cros {
root /usr/local/nginx/html;
index test.html;
}
}
然后开始测试点击按钮,打开浏览器开发者模式，看到控制台已经报错了
报错显示，从远端地址http://10.0.0.57向目标地址http://10.0.40.99:8080/index/发起XMLHttpRequest请求被浏览器同源策略给阻止了
解决方法
(1)安装django-cros-headers
登陆到10.0.40.99的python虚拟环境中执行下面命令安装
pip install django-cors-headers(2)设置全局文件，编辑settings.py在INSTALLED_APPS列表向中注册应用
中间件MIDDLEWARE的设置如下所示:
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]其中，corsheaders.middleware.CorsMiddleware 中间件需要添加到中间件的首位。
继续配置如下:
CORS_ALLOW_CREDENTIALS = True # 允许跨域时携带Cookie,默认为False
CORS_ORIGIN_ALLOW_ALL = True # 指定所有域名都可以访问后端接口,默认为False此外，还可以配置白名单，以及允许那些方法访问等信息，完成设置后，重新访问 http://10.0.0.57/cros/
3，flask中跨域解决方法
跨域问题演示
我在10.0.0.57这台内网机上部署了flask应用，监听到5000端口上，访问http://10.0.0.57:5000/cmdb/GetTree
我现在同样在10.0.0.57 nginx配置上加一个location /cros用于测试跨域，我们还是一样拿之前的html，地址换成http://10.0.0.57:5000/cmdb/GetTree这个去请求，访问测试：
因为端口不同，还是会出现跨域报错
解决方法
需要安装flask-cors扩展，登进10.0.0.57的python虚拟环境进行安装
pip install flask-corsfrom flask_cors import CORS
app = Flask(__name__)
CORS(app)然后启动应用，再次访问解决
4，Vue中跨域解决方法
我的vue项目我在本地启动，监听端口为9000，后端项目启动也在本地，监听端口为5000，我们在vue.config.js配置文件中配置代理
const config = require('./src/config/env');
//所有 webpack-dev-server 的选项都支持
devServer: {
open: true,
host: '127.0.0.1',
port: 9000,
https: false,
hotOnly: false,
proxy: {
'/': {
target: config.apiServer,
changeOrigin: true,
pathRewrite: {
'^/': ''
},
ws: false
}
},
},env.js
// 环境配置
// 后端API接口地址
const envs = {
apiServer: 'http://127.0.0.1:5000',
request_timeout: 300000,
};
module.exports = envs;
官网文档参考处:配置参考 | Vue CLI (vuejs.org)
脚手架启动vue项目
启动后端项目
5,Nginx反向代理解决方法
反向代理，我们在某个网站商城上购买物品，只需要打开浏览器输入网址即可，现在的网站都是分布式部署，后台有成百上千的机器设备，我们的购物需求，由反向代理软件分发到某一台机器上上来完成，对用户而言，是感受不到代理软件的存在的，
“反向代理”代理的是服务器，隐藏了服务器的信息，废话少说，接下来给出nginx方案
单点登陆系统和发布系统都部署在10.0.0.57测试机上，其中单点登陆系统监听地址为10.0.0.57 4999，发布系统监听地址为10.0.0.57 5000，发布每次请求前都会判断用户是否登陆，验证用户的token，判断请求用户的有效性，这其中需要发布系统主动请求单点登陆系统给出的接口，基于此，为了防止出现跨域问题，我对nginx进行如下配置
发布系统配置
server {
listen 80;
charset utf-8;
server_name hatest.10heroes.cn;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
proxy_pass http://127.0.0.1:5000/;
}
}单点登陆系统配置
server {
listen 80;
charset utf-8;
server_name ssotest.10heroes.cn;
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
proxy_pass http://127.0.0.1:4999;
}
}在本地为了方便测试，我们可以在本地对测试域名和内网ip进行绑定，打开C:\Windows\System32\drivers\etc\hosts文件，加上下面两行
10.0.0.57 hatest.10heroes.cn
10.0.0.57 ssotest.10heroes.cn当然，如果服务已经对外，需要在dns上进行绑定
当然前端jquery，ajax还有jsonp可以跨域，包括其他的后端语言都有解决跨域的处理方法，这里就不一一细说了
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
展开评论
您可能感兴趣的博客
