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 13 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
js实现内置计时器
Dec 16 Javascript
vue backtop组件的实现完整代码
Apr 07 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写的简易聊天室代码
2011/06/04 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
简单了解什么是神经网络
2017/12/23 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python exit出错原因整理
2020/08/31 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
教学改革实施方案
2014/03/31 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
第二次离婚起诉书
2015/05/18 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
windows server2008 开启端口的实现方法
2022/06/25 Servers