angular6 跨域问题

前后端分离项目，前端后端在不同的端口号上分别启动 ,调试时数据交互就会产生跨域问题。前端后端都有相应的解决方案。这里对前端的解决过程记录一下。

angular 6

在项目根目录添加 json 文件 proxy.config.json

文件内容如下：

{
  "/api": {
    "target": "http://localhost:62330",//后端接口地址
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

找到 项目根目录下的 angular.json 文件，找到 projects节点->architect节点->serve节点->option节点

追加内容：

"proxyConfig": "proxy.config.json"

修改之后的serve 节点内容如下:

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "PayLife:build",
            "proxyConfig": "proxy.config.json" //追加的配置代码
          },
          "configurations": {
            "production": {
              "browserTarget": "PayLife:build:production"
            }
          }
        },

配置成功后，要访问 http://localhost:62330/account/login 只需要在 Url的位置写

const url = `/api/account/login`;

就可以实现跨域请求。

解决方式和vue 2.x差不多，都是配置json文件，配置代理地址。