Reputation: 313
I am trying to configure the back-end with the front-end while they are running two different ports. I send a request to it from an app (on a different subdomain than the API) I get the following response:
Access to XMLHttpRequest at 'http://localhost:3000/api/products?desc=true&tab=Competition&trending=false&page=1' from origin 'http://localhost:3001' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
I don't understand why this is happening, since I have already set up Rack CORS Middleware
.
CROS configuration as follows:
Gemfile:
gem 'rack-cors'
config/initializers/cors.rb:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
# TODO: add only authorized url address
origins '*'
resource '*', headers: :any, methods: [:get, :post, :patch, :put]
end
end
For reference, I have attached a browser error screenshot.
Ajax request :
export const fetchProducts = () => (dispatch) => {
// dispatch(requestProducts())
const data = { desc: true, tab: 'My Products', trending: false }
$.ajax({
method: 'get',
url: `http://localhost:3000/api/products?desc=true&tab=Competition&trending=false&page=1`,
// csrfToken,
xhrFields: {
withCredentials: true
},
success(response) {
console.log(response)
// dispatch(receiveProducts(response));
},
error(xhr) {
console.log(xhr)
// dispatch(receiveServerErrors(xhr));
}
})
}
Thank You
Upvotes: 1
Views: 1796
Reputation: 36
You should try to set the response header key "access-control-allow-credentials" to be true with a specific origin. Like the code below:
# config/initializers/cors.rb
require 'rack/cors'
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:3000'
resource '*', headers: :any, methods: [:get, :post, :patch, :put], credentials: true
end
end
Upvotes: 1