Angular4开发解决跨域问题详解


Posted in Javascript onAugust 28, 2017

1.跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

2.反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。

3.Angular4跨域

Angular4项目分为工程代码和生产代码,在本地调试一般都是工程代码,这样联调接口的话,每次写一个接口都要丢到服务器上测试,严重影响效率,所以我们需要做的就是能在工程项目上联调接口,随时能看到效果,但是后端代码不是部署在本机的话就会有跨域问题,于是我们便需要去着重去解决跨域问题!这样后端代码随时改,前端也可以随时更改看到效果,实现真正的前后端分离!
对于Angular4解决跨域问题,应该是开发者已经想到这个问题,所以解决这个问题很简单!那就是反向代理!!

下面介绍反向代理的方法:

1.首先需要建立一个JSON文件,文件名”proxy.config.json”

{
 "/api":{
  "target":"http://106.15.179.92"
 }
}

http://106.15.179.92:为你连接机器的ip地址,或者你所需要请求的接口域名,这个就是需要被代理的

/api是代理的名称,一般都是接口请求的ip地址后面的第一个参数名

比如:http://106.15.179.92/api/fron...为一个登录的接口,反向代理后写接口请求的时候只需要写

this.$http.post(`/api/front/frontUserController/login.do`,data)
   .then(res=>{
       Console.log(res);
})

因为http://106.15.179.92已经被代理到/api上!

2.然后配置”package.json”文件

"scripts": {
 "ng": "ng",
 "start": "ng serve --proxy-config proxy.config.json",
 "build": "ng build --prod --aot",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
}

4.甩锅解决跨域

跨域?和我们前端有关系?有吗?没有吧!我不解决,我就不解决,你们后端去解决!

现在介绍一种对于任何项目都通用的解决跨域的方法!

用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持session,不需要修改任何代码,并且不会影响服务器性能。

我们只需要配置nginx,在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。这样,这个服务器上所有url都是相同的域名、协议和端口。因此,对于浏览器来说,这些url都是同源的,没有跨域限制。而实际上,这些url实际上由物理服务器提供服务。这些服务器内的javascript可以跨域调用所有这些服务器上的url。

下面,给出一个nginx支持跨域的例子,进行具体说明。

如,我们有两个pythonflask开发的项目:testFlask1和testFlask2。

testFlask2项目上的javascript脚本要通过ajax方式调用testFlask1的一个url,获取一些数据。

正常情况下部署,就会有跨域问题,浏览器拒绝执行如下这样的调用。

$("button").click(function () {
  $.get("127.0.0.1:8081/partners/json", function (result) {
    $("div").html(result);
  });
});

下面把testFlask2项目的javascrip文件修改一下。这样访问同源的url,就不会有跨域问题。

$("button").click(function () {
  $.get("partners/json", function (result) {
    $("div").html(result);
  });
});

但是,我们testFlask2项目实际上没有partners/json这样的url,那怎么处理呢?

我们这样编写nginx的配置文件:

server{
 listen8000;
 location/ {
  includeuwsgi_params;
  uwsgi_passunix:/tmp/testFlask2.sock;
 }
 location/partners {
  rewrite^.+partners/?(.*)$ /$1 break;
  includeuwsgi_params;
  uwsgi_passunix:/tmp/testFlask1.sock;
 }
}

我们把testFlask2项目部署在8080端口的根目录下。把提供web服务的testFlask1项目部署在/partners目录下。

但我们的testFlask1项目并不能处理/partners/json这样的url请求。那怎么办呢?

通过rewrite^.+partners/?(.)$ /$1 break; 这一条命令,nginx可以把收到的/partners/请求全部转为/*请求后再转发给背后的真实web服务器。

这样,RESTFUL的ajax客户端程序,只需要给出特定前缀的url就可以调用任意服务器提供的RESTFUL接口了。

甚至,通过nginx的反向代理,我们还能调用其他公司开发的网站提供的RESTFUL接口。

如,

location/sohu {
 rewrite^.+sohu/?(.*)$ /$1 break;
 includeuwsgi_params;
 proxy_passhttp://www.sohu.com/;
}

我们就把sohu网站整个搬到我们的8080:/sohu/目录下了,我们的javascript就可以尽情调用其RESTFUL服务了。

顺便说一下,rewrite^.+sohu/?(.)$ /$1 break; 这句命令中,$1表示(.)这个部分。第一对()内的参数是$1,第二对()内的参数就是$2,以此类推。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
JavaScript实现各种排序的代码详解
Aug 28 #Javascript
JS如何设置元素样式的方法示例
Aug 28 #Javascript
weex slider实现滑动底部导航功能
Aug 28 #Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 #Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 #Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
You might like
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
Redis构建分布式锁
2017/03/28 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JSONP基础知识详解
2017/03/19 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python实现飞机大战
2018/09/11 Python
Python hashlib模块实例使用详解
2019/12/24 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
机械专业毕业生自荐信
2013/11/02 职场文书
班级体育活动总结
2014/07/05 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
实名检举信范文
2015/03/02 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
唐山大地震的观后感
2015/06/05 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server