关于angular4 跨域的问题(踩坑)

初次用angular写项目,遇到很多问题,这里记录一下。因为是练习,所以自己在机器上面复制了一个java项目,用里面写好的接口,访问地址是127.0.0.1:8080
新建的angular项目的访问地址是localhost:4200,所以这里就出现了跨域问题。

刚开始接触angular 不知道用angular项目里面的http如何进行跨域,所以就用了ajax的jsonp, 查了些资料终于把原有的接口改成了jsonp的格式,但是却有遇到另一个问题,jsonp不能统统不执行!! 因为需要返回数据后修改变量,所以ajax的jsonp必须是同步修改,差了很多资料来实现jsonp的同步问题,最后也没有解决,实在没办法又只能回到angualr自带的http身上,开始查询他的跨域方式(还真有),下面分享给大家:
1、首先需要再项目的跟目录新建一个proxy.config.json文件,内容为:
{
"/":{
"target":"http://127.0.0.1:8080" //这里是你的接口所在的位置
}
}

2、修改package.json文件中的scripts选项中的starts
"start": "ng serve --proxy-config proxy.config.json",

3、用 ng serve --proxy-config proxy.config.json 重启项目(必须)

4、然后组件中就可以直接用接口了,就跟用json是一样样的
this.http
.post(url,val)
.map(res => res.json()).subscribe(data=>{
if (data) {
this.title=data.msg;
}
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。