angular 跨域和跨域后刷新报404

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