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 冒号 使用说明
Jun 06 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
Vue接口封装的完整步骤记录
May 14 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
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python实现各种插值法(数值分析)
2019/07/30 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python中property和setter装饰器用法
2019/12/19 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python 实现简单的FTP程序
2019/12/27 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python与js主要区别点总结
2020/09/13 Python
在线服装零售商:SheIn
2016/07/22 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
校园公益广告语
2014/03/13 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
手机被没收的检讨书
2014/10/04 职场文书
欢迎家长标语
2014/10/08 职场文书
文明单位汇报材料
2014/12/24 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python