angular项目解决跨域问题
封装根目录 (url.util.ts)
import {
Injectable } from '@angular/core';
import {
HttpHeaders } from '@angular/common/http';
export const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json; charset=utf-8','version':'1.1.20' })
};
@Injectable()
export class UrlUtil {
public rootUrl: string = "/rootUrl-name/";
getContextRoot() {
return this.rootUrl;
}
getBackendApiUrl(api: string) {
return this.rootUrl + api;
}
addQueryString(url: string, param: string, val: any) {
if (url.indexOf('?') >= 0) {
url += "&" + param + "=" + val;
} else {
url += "?" + param + "=" + val;
}
return url;
}
}
配置代理（proxy.config.json）
{
"/rootUrl-name/": {
"target": "http://172.0.0.1:8080/",
"secure": false,
"pathRewrite":{
"/rootUrl-name/":"/"
}
}
}
项目启动时加上代理(package.json)
{
"name": "risk-resilience-calculator",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json --host 172.0.0.1 --port 8000 --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.803.24",
"@angular/animations": "^8.0.0",
"@angular/cli": "~8.3.26",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@types/is": "0.0.20",
"@types/jquery": "^3.3.30",
"angular2-useful-swiper": "^5.0.1",
"animate.css": "^3.7.2",
"bootstrap": "^3.4.1",
"core-js": "^2.6.9",
"d3": "^5.12.0",
"echarts": "^3.1.1",
"font-awesome": "^4.7.0",
"is-js": "^0.1.1",
"jquery": "^3.4.1",
"jquery-weui": "^1.2.1",
"layui-layer": "^1.0.9",
"less": "^3.0.0",
"loadash": "^1.0.0",
"ng-zorro-antd": "^7.0.0-rc.0",
"ng-zorro-antd-mobile": "^0.12.5",
"ngx-cookie-service": "^2.2.0",
"ngx-echarts": "^4.2.1",
"recorder-js": "^1.0.7",
"rxjs": "^6.5.5",
"swiper": "^3.4.2",
"swiper-animation": "^1.2.4",
"webpack": "^4.23.1",
"webpack-dev-server": "^3.1.4",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@types/echarts": "^4.1.9",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "^2.0.6",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.1.4",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}
"start": "ng serve --proxy-config proxy.conf.json --host 172.0.0.1 --port 8000 --open",
这行代码是最关键的，这行代码的作用是项目启动时走代理，本地项目占8000端口，同一个网络下可以访问本地项目（比如如果是移动端H5项目，用手机直接访问），- -open 是项目启动后自动打开浏览器
在服务端调用接口(business-card.service.ts)
import {
Injectable } from '@angular/core';
import {
HttpClient } from '@angular/common/http';
import {
UrlUtil, httpOptions } from "src/app/utils/url.util";
import {
map } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class BusinessCardService {
option = httpOptions;
response: any;//返回对象
constructor(private http: HttpClient, private urlUtil: UrlUtil) {
}
getBusinessCard(accountId: any) {
let baseUrl = this.urlUtil.getBackendApiUrl('sale/businessCard/new/html/find');
baseUrl = this.urlUtil.addQueryString(baseUrl, 'accountId', accountId);
//发送请求
return this.http.get(baseUrl, this.option).pipe(
map(res => {
this.response = res;
let stateCode = this.response.responseStatusCode;
if (stateCode == 200) {
return this.response.responseBody;
}
return undefined;
})
);
}
supportHim(accountId: any, openid: any) {
let baseUrl = this.urlUtil.getBackendApiUrl('/sale/businessCard/supportHim');
baseUrl = this.urlUtil.addQueryString(baseUrl, 'accountId', accountId);
baseUrl = this.urlUtil.addQueryString(baseUrl, 'openid', openid);
//发送请求
return this.http.get(baseUrl, this.option).pipe(
map(res => {
this.response = res;
let stateCode = this.response.responseStatusCode;
if (stateCode == 200) {
return this.response.responseBody;
}
return undefined;
})
);
}
h5Find(accountId: any, type: any) {
let baseUrl = this.urlUtil.getBackendApiUrl('sale/switchSetting/h5Find');
baseUrl = this.urlUtil.addQueryString(baseUrl, 'accountId', accountId);
baseUrl = this.urlUtil.addQueryString(baseUrl, 'type', type);
//发送请求
return this.http.get(baseUrl, this.option).pipe(
map(res => {
this.response = res;
let stateCode = this.response.responseStatusCode;
if (stateCode == 200) {
return this.response.responseBody;
}
return undefined;
})
);
}
}
直接用api路径调接口就可以