Angular请求跨域问题

百度经验

https://jingyan.baidu.com/article/046a7b3e925ff4f9c27fa9dc.html

跨域策略：CORS了。 CORS全称Cross-Origin Resource Sharing，CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

Angular5 实现代理解决跨域请求
首先我们创建代理配置文件proxy.conf.json

参考内容如下：

{
    "/api": {
      "target": "http://localhost:3001",
      "secure": false,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }

Angular5 实现代理解决跨域请求

修改package.json文件内容如下：

“start”: “ng serve --proxy-config proxy.conf.json”,

Angular5 实现代理解决跨域请求

重点启动时采用命令【npm run start】，会自动执行代理命令。

Angular5 实现代理解决跨域请求
Angular5 实现代理解决跨域请求
END

注意事项

启动时请不要用【ng serve】，否则代理无法使用

跨域请求技术都会极大地提高页面的体验，但同时也会带来安全的隐患，其中最主要的隐患来自于CSRF（Cross-site request forgery）跨站请求伪造。

因此在使用时服务端以及客户端应该严格配合好。避免造成各类风险。一般亦可以采用cookie+token等多重验证手段，将安全风险降到最低

接下来先展示最终效果，angular-cli已经帮我们实现很多基础工作，接下来让我们简单配置一下实现相关效果