[英]Angular/C# CORS Issue
I hosted my client on localhost:8080/ and server on localhost:44302/ 我将客户端托管在localhost:8080 /上,将服务器托管在localhost:44302 /
I am trying to link to my backend, but I am getting CORS issue. 我正在尝试链接到后端,但出现了CORS问题。 Below is my Angular http request
以下是我的Angular http请求
$http.post(url, data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, OPTIONS'
}
}).success(function (response) {
// rest of the code
}).error(function (err, status) {
// rest of the code
});
On the server side which is written in C#, I have the following set on the response 在用C#编写的服务器端,我对响应进行了以下设置
Response.ContentType = "application/json";
Response.AddHeader("Access-Control-Allow-Origin", "*");
Response.AddHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
Even after setting these, I am getting the following error 即使设置了这些,我仍然收到以下错误
XMLHttpRequest cannot load https://localhost:44302/some_uri .
XMLHttpRequest无法加载https:// localhost:44302 / some_uri 。 No 'Access-Control-Allow-Origin' header is present on the requested resource.
所请求的资源上没有“ Access-Control-Allow-Origin”标头。 Origin ' http://localhost:8080 ' is therefore not allowed access.
因此,不允许访问源' http:// localhost:8080 '。 The response had HTTP status code 400.
响应的HTTP状态码为400。
What am I missing? 我想念什么?
You do not need to send any additional headers from AngularJS. 您不需要从AngularJS发送任何其他标头。 Preflight request will be made for you automatically.
飞行前请求将自动为您提出。
To enable all cross-origin requests in Web API, you can do this: 要启用Web API中的所有跨域请求,您可以执行以下操作:
Add the following code to WebApiConfig.cs: 将以下代码添加到WebApiConfig.cs:
var corsAttr = new EnableCorsAttribute("*", "*", "*"); config.EnableCors(corsAttr);
Full understanding of CORS is worth a few minutes of time. 充分了解CORS值得花几分钟的时间。 I recommend reading an in-depth tutorial here:
我建议在这里阅读深入的教程:
http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
Perform this in your application level server side No changes required in your client-side application 在应用程序级别服务器端执行此操作,无需在客户端应用程序中进行任何更改
Step 1: Install-Package Microsoft.AspNet.WebApi.Cors 步骤1:安装包Microsoft.AspNet.WebApi.Cors
Step 2: From HttpConfiguration object you can enable cors - Applicable for the entire application 第2步:从HttpConfiguration对象中,您可以启用cors-适用于整个应用程序
public static void Register(HttpConfiguration config)
{
// New code
config.EnableCors();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
Alternate : 备用 :
Step 3: Go to controller add this below attribute - Applicable only to TestController 第3步:转到控制器,将其添加到以下属性-仅适用于TestController
// Allow CORS for all origins. (Caution!)
[EnableCors(origins: "*", headers: "*", methods: "*")]
Example : 范例 :
[EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")]
public class TestController : ApiController
{
// Controller methods not shown...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.