当我的角度应用程序尝试访问ASP WebApi应用程序时,我遇到问题,每个人都在不同的服务器上。 当我的角度应用尝试访问时,我收到消息:“来自原点'http://ubex:4200'已被CORS策略阻止:对预检请求的响应未通过访问控制检查:否'Access-Control-Allow- “ Origin”标头出现在请求的资源上。”
我尝试根据找到的文档以不同的方式(全局,控制操作)启用CORS,但问题仍然存在。
当我运行我的角度应用程序时,我运行:$ ng serve --host 0.0.0.0 --port 4200 --disable-host-check 如果我在没有“禁用主机检查”的情况下运行,则该应用程序将无法运行。
这是我的WebApi.config.cs:
public static void Register(HttpConfiguration config)
{
// Enable CORS: le estamos permitiendo a la direccion:4200 consumir la aplicacion con todo y sus metodos
// config.EnableCors(new EnableCorsAttribute("http://ubex:4200", headers:"*", methods:"*"));
// config.EnableCors(new EnableCorsAttribute("http://192.168.100.152:4200", headers: "*", methods: "*"));
EnableCorsAttribute cors = new EnableCorsAttribute("http://192.168.100.152:4200", "*", "GET,POST");
config.EnableCors(cors);
// Web API configuration and services
//Configuración para verificar la seguridad del CORS
//var corsAttr = new EnableCorsAttribute("*", "*", "*");
//config.EnableCors(corsAttr);
如您所见,我已经尝试了多种方式,这是添加到我的web.config中的标题:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<!--<add name="Access-Control-Allow-Headers" value="Content-Type, Origin, X-Requested-With, Accept" />-->
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
<!--
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />
<add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
-->
</customHeaders>
</httpProtocol>
我已经添加了这个模块(以防万一):
<modules runAllManagedModulesForAllRequests="true"></modules>
这是我的角度服务:
export class EmployeeService {
formData: Employee;
readonly rootURL = "http://192.168.100.151:44344/api"
constructor( private _http: HttpClient ) { }
postEmployee ( formData: Employee ) {
return this._http.post( this.rootURL + '/Employee', formData );
}
}
请,我需要知道,我是否缺少某些东西,希望任何人都可以帮助我。.
最诚挚的问候
答案 0 :(得分:0)
我猜想这个问题主要发生在您的开发环境中,该API托管在IIS中,并且您使用npm run
或ng serve
运行Angular应用程序,该应用程序旋转了一个Node基于精简服务器。
要解决此问题,您不需要添加CORS标头,这意味着有一种更简单的方法来处理此问题: Angular的代理配置(实际上是webpack的)。设置一个proxy-config.json
作为您的API请求的代理。通常,它将包含如下的JSON:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
除Angular docs - Proxy to backend之外,还有许多关于此主题的博客。这里有一些:
如果实际上在生产中遇到此问题,则这里是另一个。 Thanh Nguyen Tien https://link.medium.com/nONOmotIr2
““ Angular 2+在产品构建中不支持代理以及如何使用API.NET RESTful API解析它”答案 1 :(得分:0)
感谢克里希南。
我创建了配置代理文件:
{
"/api/*": {
"target": "http://192.168.100.151:80"
, "secure": false
, "changeOrigin": true
, "logLevel": "debug"
, "pathRewrite": {
"^/api": "http://192.168.100.151:80/api"
}
} }
参考angular.json中的代理配置:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app10crudapi:build"
, "proxyConfig": "proxy.conf.json"
},
(以防万一)我允许WebApi服务器中的传入连接:
netsh http add urlacl url=http://192.168.100.151:80/ user=everyone
netsh advfirewall firewall add rule name="IISWeb123" dir=in protocol=tcp localport=80
profile=private remoteip=localsubnet action=allow
这是用于本地子网
我检查了IIS配置中的Access-Control-Allow-Origin,因为它具有多个值(我不知道为什么),但是它现在可以正常工作。
在我的WebApiConfig.cs上:
public static void Register(HttpConfiguration config)
{
EnableCorsAttribute cors = new EnableCorsAttribute("http://192.168.100.152:4200", "*", "GET,POST");
config.EnableCors(cors);