首页 > angular开发 > angular6.0使用教程:angular通过反向代理实现跨域

angular6.0使用教程:angular通过反向代理实现跨域

作者: 分类:angular开发 点击: 197 次
wordpress CMS主题:ssmay主题

    虽然angular也能直接调用数据库,但我们用angular6.0开发的项目大多都是前端,这时,我们要想调用数据,就需要通过数据接口来调用。而如果angular项目与数据不在同一个服务器上,这时就涉及跨域的问题,如果不跨域,是获取不取接口数据的。那么,angular6.0如何实现跨域呢?

    方法1:数据服务器端开启跨域。

    这里,我只能php接口为例,我们只需要在接口中添加如下代码:

    header("Access-control-Allow-Origin:*");

    方法2:通过angular-cli提供的反向代理实现跨域。

    在后端直接开启跨域,毕竟存在一定的风险,所以,在迫不得已的情况下,不推荐使用。还好,angular6.0提供了一个反向代理可以直接在前端代码中就可以实现跨域。具体的方法如下:

    第一步:在angular项目根目录新建了个proxy.conf.json配置文件 代码如下:

    {
      "/api": {  //【必须】:相当于一个标识
        "target": "http://www.wanlimm.cn", //【必须】:需要跨域的服务器地址
        "logLevel": "debug",  //调试用,如果代理成功,在命令行工具中会显示跨域的地址
        "changeOrigin": true, //如果不是代理本机就【必须】设变true,否则可以不设置
        "pathRewrite": { //【必须】:修改代理接口的路径地址
          "^/api": ""
        }
      }
    }

    第二步:配置angular项目根目录下的package.json文件,如下图:

    angular6.0使用教程:angular通过反向代理实现跨域

    即在start那添加 --proxy-config  proxy.conf.json  --open 

    到这里,angular6.0的跨域就配置完成了。

    第三步:执行angular6.0的代理:

    我们一般启动angular项目时,用的命令是:ng  serve  --open ,而此时用这个命令,代理是不会执行的。这时,我们应该通过下面这样的命令来启动项目:

    npm  start     或者   npm  run  start

    这样,我们就成功实现了angular6.0项目的跨域,我们可以在angular代码中直接调用我们配置好的跨域服务器上的接口来获取数据了。

文章作者:高时银博客
本文地址:http://wanlimm.com/77201806155673.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:
wordpress CMS主题:ssmay主题

或许你会感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.