美文网首页我爱编程
关于angular4 跨域的问题(踩坑)

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

作者: fzp_xf | 来源:发表于2018-02-23 17:00 被阅读0次

    初次用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;
    }
    })

    相关文章

      网友评论

        本文标题:关于angular4 跨域的问题(踩坑)

        本文链接:https://www.haomeiwen.com/subject/hkmxxftx.html