达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心 达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心
软件测试工程师
 当前位置:主页 > 高端课程 > 软件测试工程师 >

解决前端开发环境中的的跨域问题

时间:2019-06-25  来源:未知  作者:广州达内培训

一、为什么会有跨越问题
是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问。试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取。
二、解决思路
知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了。不管是jsonp,core,还是代理的方式,都是需要服务配合的。哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法。
三、解决方案
1.完全交予后端解决,配值请求头信息(core),前端什么都不用做,如express.js中配置如下,其它后端语言配置同理

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",'3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2.使用nginx反向代理,在配置文件nginx.conf中找到server{}对象,更改项目地址root和配置代理地址proxy_pass,这个方法适合前端静态文件使用:

location / {
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址,以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

3.如果使用vue-cli搭建的项目,可以直接使用proxyTable模块,项目框架已经集成,找到配置文件在/confif/index.j,如下配置

//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/adv":{
        target:"http://127.0.0.1:3000",//需要访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/adv': '/'//路径的替换规则
        }
    },
    "/user":{
        target:"http://127.0.0.1:3000",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/user': '/'//路径的替换规则
        }
    }
}

显然,大部分情况我们不可能为每个api接口都在这加一个规则,所以更好的配置是:

proxyTable: {
    '**': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,   //允许跨域
    }
}

或者

proxyTable: [{
    context: ['/**'],
    target: 'http://127.0.0.1:3000',
    changeOrigin: true,  //允许跨域
}]

是不是方便了很多
4.其它,如jsonp是通过接口回调的方式实现跨域,这个现在已经用的少了。window.postMessage() 是HTML5的一个接口,专注实现不同窗口不同页面的跨域通讯。这些是对单个接口或者页面层面的跨域,使用也简单就不详细说了。




上一篇:使用 docker 部署常用的开发环境
下一篇:CODING 2.0 企业级持续交付解决方案

友情链接:
  • 全球最大晶圆代工半导体制造厂,台积电斥资订购艾斯摩尔机器设备
  • 英特尔依然是那个英特尔,且看英特尔的城防体系
  • 支持双 DRAM 内存接口,慧荣企业级 SSD 主控方案披露
  • 在全球被反垄断罚款,冤!高通到底哪里得罪了欧盟?
  • 强强联合!万业、微电子所和芯鑫共同打造全新半导体设备
  • 复旦大学校长称:对于集成电路产业发展,大学应该主动担当
  • 技术再升级!无锡中科芯攻克晶圆级再布线及晶圆级凸点制备关键技
  • 聚力!万业企业设立集成电路装备集团,提供自主可控设备
  • 德州仪器C2000微控制器增强连通性和控制性
  • 英特尔打出降价策略,以免被竞争对手 AMD 打败?
  • 贸易摩擦的闹剧没有赢家,苹果有勇气离开中国吗?
  • 图像信号与视觉处理器的发展趋势
  • 真干快消品定位方案班(第二期)火热开班
  • Java集合 ArrayList原理及使用
  • TDD(测试驱动开发)死了吗?
  • JAVA基础之XML相关
  • javaweb项目搭建ehcache缓存系统
  • 每日一码——字符串统计
  • 一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生
  • 九:模板方法模式
  • 十二:命令模式(人员解耦和)
  • Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转
  • SpringCloud学习(SPRINGCLOUD微服务实战)一
  • 记一次微信网页授权后获取用户信息并重定向
  • 速途新营销五点实战洞察解码“品效合一”
  • 十一:外观模式详解(Service,action与dao)
  • 手把手教你学会 基于JWT的单点登录
  • mysql锁机制总结,以及优化建议
  • 解决多个版本jar包冲突【jar内包名重命名】
  • 中国首张5G终端电信设备进网许可证 华为Mate 20 X 5G版入网
  • RPC之Thrift
  • 高级Java工程师必备 ----
  • 天猫618期间实物支付GMV增长38.5%
  • 换季了,老板你的库存处理好了吗?
  • 从“618”大数据看中国消费新活力
  • 小米生态链:贵在格局感与收放度
  • CODING 2.0 企业级持续交付解决方案
  • 老铁奇趴“新京济” 快手*京东618战报出炉
  • 中小企业新媒体运营基本技能
  • 上汽大通房车再度携手LINE FRIENDS 魔都巡游顺利开启
  • 华为高端手机国内市场份额超苹果夺得榜首
  • 中国智能制造分析报告
  • iPlus艾加营销助力腾讯广告牵手吴晓波 推进商业IP变现
  • 2019世界新能源汽车大会7月1日将在海南举行
  • 区域酒企如何转型突围
  • 时时彩论坛
  • 五星体育斯诺克
  • 北单比分直播
  • 河北11选5走势图
  • 福建体彩36选7开奖结果
  • 九龙图库下载