-
-
-
-
-
-
22.多数据源:及其简易的使用方式,在线配置数据源配置,便捷的从其他数据抓取数据; 23.提供单点登录CAS集成方案,项目中已经提供完善的对接代码 24.低代码能力:表单设计器,支持用户自定义表单布局,支持单表,一...
-
-
浏览器跨域问题解决
2020-05-13 14:25:12由于vue等单页应用的兴起,同一个页面对于不同数据来源的需求却来越迫切,目前市面上存在三种方式来进行跨域问题的解决: serve(应用于vue)等静态页面服务器自身可配置路由转发功能 服务器程序开放防盗链白名单...浏览器跨域问题解决
由于vue等单页应用的兴起,同一个页面对于不同数据来源的需求却来越迫切,目前市面上存在三种方式来进行跨域问题的解决:
- serve(应用于vue)等静态页面服务器自身可配置路由转发功能
- 服务器程序开放防盗链白名单(在允许访问请求体内回馈一系列响应头)
- 后台使用NGINX服务程序进行转发
三种解决方式各有优缺点:
- 第一种方式,页面比较依赖于serve服务(vue的后台运行环境)程序,如果遇到部署在移动端的本地应用,一般会凉。
- 第二种方式,优点是逻辑清晰,后端修改方便,只要在所有响应中添加header即可,并可针对请求来源灵活配置,缺点则是需要经常配置,比如说服务程序先开发完成,运行一段时间后,有新的前端系统需要接入该后端服务,后端服务势必要进行配置。运维开销大。
- 第三种方式,由NGINX服务配置统一调控,一般在云部署系统上比较常见,优点是管控集中,缺点是庞大,不够灵活(相对而言),需要部署NGINX服务,vue静态页面程序应该部署在NGINX上。
那么,我就逐个进行每种方式的案例展开吧:
1. 静态服务自身进行转发(以vue serve为例)
在vue项目config/index.js 文件中,dev | build对象下默认各有个proxyTable: {}属性,用脚手架创建完项目后,里面是空的,即没有进行任何代理,我们需要进行手动添加
proxyTable: { '/api': { target: 'http://localhost:4000', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '' //重写接口 } }
上述代码意义为前端程序(如部署在http://localhost:8080上)发送请求时(例如http://localhost:8080/api/hello),请求发送到vue运行后台程序serve上,serve服务器接收到请求后,解析到报文请求地址以/api开头,对应实际请求地址为http://localhost:4000,于是,它将/hello拼接到http://localhost:4000后面,变成http://localhost:4000/hello,进行请求访问,并将访问结果返回给前端页面.
2.服务器开放白名单
服务器以nodejs - express为例,需要添加拦截器:
app.all('*', function (req, res, next) { res.header('Content-Type', 'application/json;charset=utf-8'); // 指定允许的跳转网址 -- 即从哪个网址发出的请求(早期的作用是进行防盗链) res.header('Access-Control-Allow-Origin', req.headers.origin); // 指定允许的请求类型 res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE'); // 该次允许进行跨域访问的失效,如果为0,代表每次请求都需要进行跨域判定,直接的结果就是每次请求都包含两次请求(一次跨域判定,一次正常请求);如果为其他数值,表示多久之内不需要进行跨域判定,单位为秒 res.header('Access-Control-Max-Age', '0'); // 指定浏览器发送请求的header中允许的请求头键值对 res.header('Access-Control-Allow-Headers', 'Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token'); // 指定是否允许携带cookie值,默认为false res.header('Access-Control-Allow-Credentials', 'true'); // 是否允许除了200以外的响应接收(如果不加该字段,典型的是前端控制台会报'It does not have HTTP ok status') res.header('XDomainRequestAllowed','1') next(); });
springboot等java程序也一样,需要在拦截器中添加上述返回头键值对.
这样,被允许访问的页面就可以畅通无阻的发送请求了.
3. nginx配置
server { listen 80; server_name localhost; location ~ /a/ { proxy_pass http://localhost:8081; } location ~ /b/ { proxy_pass http://localhost:8082; } }
上述代码意义是
将请求形如http://localhost:8080/a/的请求映射为http://localhost:8081/;
将http://localhost:8080/a/的请求映射为http://localhost:8082/
原理与vue的serve程序一样。
不过,注意一点是,部署的时候,该vue静态页面程序应该部署在NGINX上。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
收藏数
41
精华内容
16
-
最新中文停用词.txt
-
2021年 系统架构设计师 系列课
-
linux启动jar命令nohup
-
A movie title explorer.zip
-
K80显卡挖矿(ETH)测试
-
完美解决稀疏卷积报错spconv/box_iou.h:: boost/geometry.hpp:
-
opencv.zip
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
LeetCode刷题(20. 有效的括号)
-
基于Vue+express+mysql在线订餐购物商城app设计
-
Samba 服务配置与管理
-
11. 含k个3的数.cpp
-
MATLAB最邻近插值算法的实现
-
自动化测试Python3+Selenium3+Unittest
-
python课件.rar
-
MySQL NDB Cluster 负载均衡和高可用集群
-
Liunx 优化思路与实操步骤
-
ELF视频教程
-
MySQL 性能优化(思路拓展及实操)
-
牛牛量化策略交易