当前位置: 首页 > Web前端 > HTML5

Angular4开发解决跨域问题

时间:2023-04-05 01:23:50 HTML5

1.跨域浏览器对javascript的同源策略有限制。比如a.cn下的js不能调用b.cn下的js、对象或者数据(因为a.cn和b.cn是不同的域),所以就出现了跨域。上面说的同域是什么概念???简单的解释就是同一个域名,同一个端口,同一个协议同源策略:请求的url地址,必须和浏览器上的url地址在同一个域,即域名,端口,协议是一样的。比如:我本地的域名是study.cn,我从另一个域名请求了一段数据。这时候浏览器会显示Reportinganerror,这是同源策略的保护。如果浏览器没有javascript同源策略的保护,那么一些重要的机密网站就会很危险~2。反向代理反向代理(ReverseProxy)方法是指代理服务器在互联网上接受连接请求,然后将请求转发给内网服务器,并将从服务器得到的结果返回给在互联网上请求连接的客户端互联网。这时候代理服务器就充当了对外的反向代理。服务器。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...是登录接口。在反向代理之后写接口请求时,只需要这样写$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”:“ngserve--proxy-configproxy.config.json”,“build”:“ngbuild--prod--aot","test":"ngtest","lint":"nglint","e2e":"nge2e"}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;位置/{includeuwsgi_params;uwsgi_passunix:/tmp/testFlask2.sock;}location/partners{rewrite^.+partners/?(.*)$/$1break;includeuwsgi_params;uwsgi_passunix:/tmp/testFlask1.sock;}}我们将testFlask2项目部署在8080端口的根目录下,将提供web服务的testFlask1项目部署在/partners目录下。但是我们的testFlask1项目无法处理/partners/json这样的url请求。那我们该怎么办呢?通过rewrite^.+partners/?(.)$/$1break;命令,nginx可以将接收到的所有/partners/请求转化为/*请求,然后转发给背后真正的web服务器。这样RESTFULajax客户端程序只要给url加上特定的前缀就可以调用任何服务器提供的RESTFUL接口。甚至,通过nginx的反向代理,我们还可以调用其他公司开发的网站提供的RESTFUL接口。例如location/sohu{rewrite^.+sohu/?(.*)$/$1break;includeuwsgi_params;proxy_passhttp://www.sohu.com/;}我们将整个sohu网站移动到我们的8080:/sohu/目录下,我们的javascript可以任意调用它的RESTFUL服务。对了,命令rewrite^.+sohu/?(.)$/$1break;中,$1代表的是(.)部分。第一对()中的参数是$1,第二对()中的参数是$2,依此类推。