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