CORS - Please help

I have been googling around but none of the solutions are working.

I have setup a simple auth ss microservice and now want to access this from a vue.js spa site.
But I keep getting:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have added Cors to the SS app:

Plugins.Add(new CorsFeature(allowOriginWhitelist: new [] { “http://localhost”, “http://localhost:8080” }, allowedMethods: “GET, POST, PUT, DELETE, OPTIONS”,
allowCredentials: true,
allowedHeaders: “Authorization, Content-Type”));

		PreRequestFilters.Add((httpReq, httpRes) =>
		{
			//Handles Request and closes Responses after emitting global HTTP Headers
			if (httpReq.Verb == "OPTIONS")
			{
				httpRes.AddHeader(HttpHeaders.AllowOrigin, "*");
				httpRes.EndRequest();
			}
		});

I then deployed the SS site on azure.

In my vue.js I do

In my main.js

import VueResource from 'vue-resource'

Vue.use(VueResource);

Vue.http.headers.common['Access-Control-Expose-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, x-session-token, timeout, Content-Length, location, *'
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

And then in my vue page:

this.$http.post('https://---myurl---.com/auth/credentials', this.data)
                    .then(response => {
                        console.log(response)
                    }, error => {
                        console.log(error);
                    });

So it seems that I did everything ok, but it’s just not working.

I hope you can see what I am doing wrong… (and I am using it on my local machine to test http://localhost:8080

You should remove the PreRequestFilters, the CorsFeature already correctly responds to OPTIONS requests. Can you also remove Vue.http.headers.common, you shouldn’t need to add anything to get CORS working.

To have Angular add Cookies you need to add the withCredentials: true option, but why not just use ServiceStack’s TypeScript JsonServiceClient? It’s already configured to include credentials and provides a succinct end-to-end Typed APIs you can use with TypeScript ServiceStack Reference DTOs.

Thanks. Issue is that it’s an API for a third party and they want to use other technologies or frameworks. So although the typescript jsonserviceclient would work, I need to make it work in all cases.

I removed the PreRequestFilters again, I added the Vue.http.options.xhr = {withCredentials: true}; to set the credentials to true, and still seeing this preflight error. Can you point me in a direction what to check (client or server)?

All the http client needs to do is add credentials: true to the fetch/Ajax client that’s making the request.

Try making a call using just the fetch API whilst using the credentials: true option, if you can then the server is properly configured and something is wrong with your http configuration.

Thanks for your support. I am sorry, but adding the CorsFeature was all that was needed indeed. For some reason autodeployment via Azure deployment was not working correctly, so whatever change I made to the server just did go to the server :frowning: - stopping and restarting the server did the trick. Sorry for that.

1 Like

Hi

Coming back to this. My domain has now aliassen (meaning I host the same api on different domain aliassen). When I add the new domain, I still get the error about No 'Access-Control-Allow-Origin' header is present on the requested resource. although the domain mentioned is in the Plugin:

Plugins.Add(new CorsFeature(
					allowOriginWhitelist: urlWhiteList,
					allowCredentials: true,
					allowedHeaders: "Content-Type, Allow, Authorization"));

where the urlWhiteList is a list with all allowed domains.

Any ideas?

Please provide the raw HTTP Request/Response header that has the issue and your urlWhiteList.

Sorry for this; I re-deployed my server and it worked :upside_down_face: