Angular4开发解决跨域问题详解
(编辑：jimmy 日期: 2024/11/15 浏览：3 次 )
1.跨域
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
上面提到的,同域的概念又是什么呢"htmlcode">
{
"/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.甩锅解决跨域
跨域"htmlcode">
$("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/"htmlcode">
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实现各种排序的代码详解