Angular開發環境跨域問題

開發背景：Angular7 +Angular Material；

本地開發遇到跨域時，network會提示failed；

這時候我們可以通過以下幾個步驟來進行代理：

步驟一：建立一個proxy.conf.json文件，文件放置位置如下圖；

步驟二：配置proxy.conf.json文件；

{
  "/": {   //必須，相當於一個標識
    "target": "http://www.target",  //必須，需要跨域的目標服務器地址
    "logLevel": "debug",    //調試用，如果代理成功，在命令行工具中會顯示跨域的地址
    "changeOrigin": true,  //如果不是代理本機就必須設變true，否則可以不設置
    "pathRewrite": {     //必須，修改代理接口的路徑地址
     	"^/": ""
    }
  }
}

步驟三：配置package.json文件；

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "project-name:build",
        "proxyConfig":"proxy.conf.json"
      },
      "configurations": {
        "production": {
        "browserTarget": "project-name:build:production"
        }
      }
  }

步驟四：請求數據；

官方參考文檔：【代理到後端服務器】