angular6 訪問跨域問題

設置反向代理

1）創建本地代理proxyconfig.json文件

angular6項目裏新建proxyconfig.json文件，放在根目錄（和angular.json同級）

{
  "/apidata":{
    "target":"http://localhost:8093",
    "secure":false,
    "logLevel":"debug",
    "changeOrigin":true,
    "pathRewrite":{
      "^/apidata":""
    }  
  }
}複製代碼

這裏定義的/apidata就是路由匹配規則，遇到這個開始解析，而且跟pathRewrite 定義的要一致

target 設置的就是跨域域名端口

2）angular.json配置文件加載配置代理文件proxyconfig.json

而後在angular.json文件中使用上面的配置文件

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "project1:build",
    "proxyConfig":"proxyconfig.json"
  },複製代碼

添加

"proxyConfig":"proxyconfig.json"複製代碼

3）服務文件裏使用http.get獲取接口數據，url地址須要配置上代理重寫規則的 /apidata