I have a web api project separate and a simple UI project separate. To access web api in the UI project i have enabled CORS
as below in WebApiConfig.cs
var cors = new EnableCorsAttribute("http://localhost:49567", "*", "*","*");
config.EnableCors(cors);
In AccountController.cs
when [Authorize]
is disabled i am able to access the APIs from the UI html project page using ajax.
$.ajax({
type: "GET",
url: "http://localhost:51401/api/Account/UserInfo",
data: "",
contentType: "application/json; charset=utf-8",
success: VerifyResponse,
dataType: "json",
crossDomain: true,
failure: ajaxCallFailed});
But when i want to enable [Authorize]
to create token authentication by calling /token
first, the error Cross-Origin Request Blocked:
repeats in the html.
$.ajax({
method: "POST",
url: "http://localhost:51401/Token",
data: {
username: $('#username').val(),
password: $('#password').val(),
grant_type: 'password'
},
contentType: "application/json",
success: VerifyResponse,
dataType: "json",
crossDomain: true,
failure: ajaxCallFailed
});
My web.config in web api project now after the edit made after suggested by @arista_14
<system.webServer>
<modules>
<remove name="FormsAuthentication" />
<remove name="ApplicationInsightsWebTracking" />
<add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
</modules>
<validation validateIntegratedModeConfiguration="false" />
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
</customHeaders>
</httpProtocol>
</system.webServer>
Now the error is :
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:51401/Token. (Reason: CORS preflight channel did not succeed).[Learn More]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:51401/Token. (Reason: CORS request did not succeed).[Learn More]
I ran into same problem. Just put this code in web.config. It worked for me -
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
</customHeaders>
</httpProtocol>
The reason you're getting cross-origin blocking happening is because of the ports being different. You specified this url in your CORS: http://localhost : 49567
But then proceed to call it with this url: http://localhost : 51401
Note the difference in ports. I actually had the same issue until I set my localhost port to something that doesn't change on a whim.
I also did the config another answer shows, which didn't work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.