如果您在Angular中使用不同的后端端口,例如前端使用端口4200,而后端使用端口3000,您可能会遇到浏览器将重定向到不同的后端端口的问题。该问题可能是由于CORS(跨域资源共享)策略引起的。
通过在后端应用程序中添加适当的响应标头来解决此问题。您需要允许来自前端应用程序的跨域请求。这可以通过在响应中添加以下标头来实现:
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
将http://localhost:4200
更改为您的前端应用程序正在运行的端口。
这将允许来自前端的跨域请求,包括GET,POST,OPTIONS,PUT,PATCH和DELETE方法,并允许使用X-Requested-With和content-type标头。
在Angular中,您还可以使用HttpClientModule
中添加withCredentials:true
的选项来启用跨站点访问资源共享(CORS)cookies:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true },
]
})
export class CoreModule { }
通过这种方法,Angular将包含一个withCredentials:true
的标头,告诉服务器在发送cookie时包含跨域请求,从而解决跨域cookie的问题。