Angular6開發環境跨域

Angular交流羣：836531849

解決開發環境跨域問題

nginx就不說了，主要是說一下在angular6的開發環境上解決跨域的問題。

第一步：創建一個proxy.conf.json文件

注： 1.文件名稱任意命名,與配置相同就行 2.文件位置在根目錄下，與src文件同級

第二步：配置package.json文件

angular版本升級到6以後，angular.json的配置文件進行了大改造，與以前版本已經不同，由於樓主用的angular6，就先介紹angular6的跨域配置。 在angular.json文件中找到projects->項目名稱->architect->serve->options的配置項,增長"proxyConfig":"proxy.conf.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"
         }
       }
   }
複製代碼

第三步：配置proxy.conf.json代理

{
  "/api": {
    "target": "http://api.xxx.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""},
    "changeOrigin": true,
    "logLevel": "debug"
  }
}
複製代碼

主要是這個changeOrigin參數，以前沒有加，而後一直請求不成功，坑了好久。若是是請求外網，就是true。

第四步：請求數據

請求數據的時候url直接是api/加上接口的地址

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { HttpClient, HttpParams } from '@angular/common/http';
@Component({
  selector: 'app',
  templateUrl: './app.html',
  styleUrls: ['./app.less'],
  
})
export class IssuesComponent implements OnInit {
  constructor(private http: HttpClient) { }
  query(params = {}): Observable<any> {
    return this.http.get(‘api/info’, { params: params });
  }
  ngOnInit() {
   this.http.get(‘api/info’).subscribe(data=>{
    //這裏就是請求下來的數據
    console.log(data)
   })
  }
}
複製代碼

若是有沒有寫正確的地方，歡迎指正！

Angular交流羣：836531849