I have create an Asp.Net Core Web API and have checked it is working correctly using postman.
I have downloaded the GitHub Project from this blog: https://paweljw.github.io/2017/09/vue.js-front-end-app-part-3-authentication/
I have modified the url in src/backend/vue-axios/axios.js to my web api url
No matter what I do all I get is:
HTTP500: SERVER ERROR - The server encountered an unexpected condition that prevented it from fulfilling the request.
(XHR)OPTIONS - http://localhost:61783/api/token
I have put a break point on the Web API Token method and it is never hit.
Any ideas on how to fix this?
Finally cracked it, it was CORS all along!
services.AddCors(options =>
{
options.AddPolicy("AllowAllHeaders",
corsbuilder =>
{
corsbuilder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.WithOrigins("http://localhost:8080");
});
});
The WithOrigins helped
And enabled cors with a policy on the controller
[EnableCors("AllowAllHeaders")]
Related
In my next.js project I'm trying to send a POST request using axios:
axios.defaults.baseURL = "https://{my-server-url}/api";
useEffect(() => {
axios({
method: "POST",
url: "/build_pages",
data: {
page_id: 3,
},
}).then((res) => {
console.log(res.data);
});
}, []);
I'm getting the following CORS error:
My server is [laravel] php and is deployed on cpanel, but before I deployed my backend to cpanel (i.e. when I was working on localhost) I did not get this error.
How do I turn off this error (note that I don't want to download any web browser extension to fix the CORS error)
I came across this link but it does not say where (which file) to add it to so I'm stuck
Edit: I tried the middleware solution provided in this answer: https://stackoverflow.com/a/69151121/12009071 but also it didn't work, howerver the error changed to:
Access to XMLHttpRequest at 'https://{my-server-url}/api/check_admin_login' from origin 'https://{my-server-url}.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
This is an API-side error. You have to allow cross origin requests on the API server. Based on your question, I assume your API is NOT the Next.js project.
Therefore, you should check the settings of your server. The next.js POST call is not the issue.
I am using Odata with .Net Core web api. For client side i am usin angular 13. OData batch request works fine in localhost. After published on iis with 'ng-build' i am getting a cors error from odata batch request. I already allow origins. What am i missing?
I am not sure but think it was really related with cors.
I only added this code block in to "Configure" method in startup.cs and problem solved.
app.Use((context, next) => {
context.Response.Headers["Access-Control-Allow-Origin"] = "*";
return next.Invoke();
});
But before the batch, i didn't need this code block i have added. All request works fine (except batch) without the code block i have added. I am trying to understand this part.
I am new to Ionic framework (with Vuejs) and trying to make simple Crud app. But due to CORS issues, i can't able to login.
Browser console show XMLHttpRequest at 'http://localproject.test/api/login' from origin 'http://localhost:8100' has been blocked by CORS policy
I tried a lot of different solutions, without success Please help.
Thanks in advance.
You will allow CORS from your backend. If you want to resolve CORS issue from your end you will use ionic HTTP native plugin link. This is not recommended because you can't track requests from your network tab.
my suggestion you need to resolve your CORS issue from your backend.
If your app will be running on browser, use Proxy server.
Example: I want to post to http://localproject.test/api/login.
In package.json, I will add this line:
"proxy": "http://localproject.test/api"
My POST request in Login component:
axios
.post("/login", loginData)
.then((response) => {
...
}
return response.data;
})
.catch((error) => {
...
});
I'm currently working on a project where I'm using ASP.NET Core MVC (views are running on another port using Vue). I have set up my models and controller set up and I've tested these using swagger. They work exactly as expected. I have tested the post method on swagger and it works, but requests from my view on another port running Vue and Postman return a 405 error. Inspecting the response headers on Postman, I can see "Allow : DELETE, GET, PUT". Because my view will be running on another port, I've already added CORS the following to my startup configure method (not currently concerned about security implications):
app.UseCors(builder => {
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
My controller features the following for the POST method:
[ResponseType(typeof (Review))]
[HttpPost]
public async Task Post(Review review)
{
db.Reviews.Add(review);
await db.SaveChangesAsync();
}
I am accessing the URL on Postman from https://localhost:44334/reviews/Post. Reviews being the controller and post is the method. I am not receiving any cross original control errors, just this 405. Why might it be doing this and how can I debug this?
I was trying to post to https://localhost:44334/reviews/Post but my router was not set up like this. Changing the URL to https://localhost:44334/reviews/ and setting the method to Post worked and returned a success 200 response.
It is very common issue. For requests coming from localhost AllowAnyOrigin() doesn't work. You need to allow the origin explicitly like:
services.AddCors(options => options.AddPolicy("ApiCorsPolicy", builder =>
{
builder.WithOrigins("http://localhost:8080").AllowAnyMethod().AllowAnyHeader();
}));
In the configure method tell CORS to use the policy you just created:
app.UseCors("ApiCorsPolicy");
Requests from postman passes the CORS because they attach special headers.
I'm trying to deploy an app I created online. The UI is created using vue.js and it's calling a API written in dotnet core. I'm running dotnet core 2.2.
The web project and the API are on different servers and accessible under different domains, the web project is hosted on Netlify if that makes a difference. I managed to set up the CORS policy so that locally everything worked fine. When I access the app on the webserver I receive CORS errors whenever I post data. My GET and DELETE requests work just fine.
Here is my CORS policy
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("Default", builder =>
{
builder.WithOrigins(/* the domain where my web project is hosted */);
builder.AllowAnyMethod();
builder.AllowAnyHeader();
builder.AllowCredentials();
});
});
}
So I'm thinking everything should be fine. AllowCredentials is required because I'm using SignalR which otherwise wouldn't work.
The error message in the dev tools is
POST [my api endpoint] 400 (Bad Request)
Access to XMLHttpRequest at '[my api endpoint]' from origin 'https://xxx.netlify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
And when I look into the console where my dotnet project is running I see the following error message
Connection id "0HLQNTR19GE1T" bad request data: "Requests with 'Connection: Upgrade' cannot have content in the request body."
Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException: Requests with 'Connection: Upgrade' cannot have content in the request body.
at Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException.Throw(RequestRejectionReason reason)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1MessageBody.For(HttpVersion httpVersion, HttpRequestHeaders headers, Http1Connection context)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.CreateMessageBody()
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)
at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication`1 application)
So far I tried setting the Access-Control-Allow-Origin = "*" Header via the netlify.toml file, using the [EnableCors] attribute on my controller action. I edited my AJAX request (axios) and set withCredentials: true and in general played around with the CORS policy a lot. Unfortunately without luck and I'm running out of ideas.
I'm happy about any suggestions.
Check your nginx.conf file for a line called proxy_set_header and set it to Connection $http_connection