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