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文件，配置代理地址。