angualr跨域访问配置

Posted dusf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angualr跨域访问配置相关的知识,希望对你有一定的参考价值。

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

简单的解释就是相同域名,端口相同,协议相同

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

如果我在本地上的域名是study.cn,请求另外一个域名一段数据

这个时候在浏览器上会报错

这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

  • 反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。 
Angular跨域 
Angular项目分为工程代码和生产代码,在本地调试一般都是工程代码,这样联调接口的话,每次写一个接口都要丢到服务器上测试,严重影响效率,所以我们需要做的就是能在工程项目上联调接口,随时能看到效果,但是后端代码不是部署在本机的话就会有跨域问题,于是我们便需要去着重去解决跨域问题!这样后端代码随时改,前端也可以随时更改看到效果,实现真正的前后端分离! 
对于Angular解决跨域问题,应该是开发者已经想到这个问题,所以解决这个问题很简单!那就是反向代理!! 
下面介绍反向代理的方法: 
首先需要建立一个JSON文件,文件名” 
proxy.config.json

{
"/api":{
"target":"http://106.15.179.92"
}
  • 1
  • 2
  • 3
  • 4

http://106.15.179.92:为你连接机器的ip地址,或者你所需要请求的接口域名,这个就是需要被代理的 
/api是代理的名称,一般都是接口请求的ip地址后面的文件夹名 
比如:http://106.15.179.92/api/front/frontUserController/login.do,为一个登录的接口,反向代理后写接口请求的时候只需要写

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

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

然后配置”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"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

甩锅解决跨域办法 
跨域?和我们前端有关系?有吗?没有吧!我不解决,我就不解决,你们后端去解决! 
现在介绍一种对于任何项目都通用的解决跨域的方法! 
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);
});
  • 1
  • 2
  • 3
  • 4

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

$("button").click(function () {
$.get("partners/json", function (result) {
$("div").html(result);
  • 1
  • 2
  • 3

但是,我们testFlask2项目实际上没有partners/json这样的url,那怎么处理呢? 
我们这样编写nginx的配置文件:

server{
listen8000;
location/ {
includeuwsgi_params;
uwsgi_passunix:/tmp/testFlask2.sock;
location/partners {
rewrite^.+partners/?(.*)$ /$1 break;
uwsgi_passunix:/tmp/testFlask1.sock;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我们把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;
proxy_passhttp://www.sohu.com/;
  • 1
  • 2
  • 3

我们就把sohu网站整个搬到我们的8080:/sohu/目录下了,我们的javascript就可以尽情调用其RESTFUL服务了。 
顺便说一下,rewrite^.+sohu/?(.*)//1 break; 这句命令中,1(.?)()1表示(.?)这个部分。第一对()内的参数是1,第二对()内的参数就是$2,以此类推。

























以上是关于angualr跨域访问配置的主要内容,如果未能解决你的问题,请参考以下文章

Nginx 跨域

Web Api跨域访问配置及调用示例

angualr4 路由 总结笔记

System.Web.Http.Cors配置跨域访问的两种方式

angualr + nginx 多site构建

win10的Edge不支持AJAX跨域访问吗?