angular 跨域
前端web部署的服务器和后端提供服务API不在同一个域名下,就会产生跨域问题,在学习Angular的过程中,出现了跨域的问题,我自己整理了一下相关的解决方案,供大家参考。
一、Angular CLI 配置解决
在angular 项目的根目录下创建 proxy.config.json 文件,文件内容如下(参考)
{
"/": {
"target": "http://localhost:50001/",
"secure": false
}}
修改package.json文件内容如下:
“start”: “ng serve --proxy-config proxy.config.json”
启动Angular项目时,使用 npm run start 命令启动,不可以使用 ng serve命令
二、修改angular.json serve配置
在angular 项目的根目录下创建 proxy.config.json 文件,文件内容如下(参考)
{
"/": {
"target": "http://localhost:50001/",
"secure": false
}}
打开angular.json文件,配置加载代理文件proxy.config.json 找到serve,添加 “proxyConfig”:“proxy.config.json”,配置内容如下:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "Angular:build",
"proxyConfig": "proxy.config.json"
},
"configurations": {
"production": {
"browserTarget": "Angular:build:production"
}
}
}
本人更倾向于第二种解决方案,直接使用 ng serve命令启动项目就可以
angular4.0项目执行npm run build后,进入页面正常显示。 但是当刷新页面时,报错404,页面未找到
出现这个问题的原因,应该是找不到路由地址导致的,然后找到了下面的解决方案。
找到app.module.ts文件,这个是根模块。在模块中加入HashLocationStrategy和LocationStrategy服务。
// 1、引入HashLocationStrategy、LocationStrategy服务
import {
HashLocationStrategy, LocationStrategy} from '@angular/common';
// 2、注入服务
@NgModule({
declarations: [],
imports: [],
providers: [
{
provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]
})
原文来自于:https://blog.csdn.net/liwan09/article/details/82286307和https://my.oschina.net/u/3717377/blog/1623374