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 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
JS中如何优雅的使用async await详解
Oct 05 Javascript
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
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
详解JavaScript对象的深浅复制
2017/03/30 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
Python socket服务常用操作代码实例
2020/06/22 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
教师节活动主持词
2014/04/02 职场文书
小学生倡议书范文
2014/05/13 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
银行贷款委托书范本
2014/10/11 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript