CODEWITHSUNDEEP
javascriptruby-on-rails-6
AssanSav
AssanSav

Reputation: 41

CORS policy Access-Control-Allow-Origin header in the response mustn't be wildcard * when credentials include

I am a junior dev and this is my first time deploying a Rails API and React-Redux front-end APPs both on Heroku, My backend has users authentications using session cookies and my frontend is sending requests with credentials: "include" which doesn't pass CORS policy. I have tried many tutorials and none of them had my bug fixed. here are the error and codes

error

Access to fetch at 'https://lets-kari-to-the-next.herokuapp.com/api/v1/session/status' from origin 'https://lets-meetup-app.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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'.

config.ru

 use Rack::Cors do
 allow do
   origins '*'
   resource '*',
       :headers => :any,
       :methods => [:get, :post, :delete, :put, :patch, :options]
 end
end

React-Redux fetch method

import { LOGGED_IN, LOGGED_OUT, BASE_URL } from "./types"


export const sessionStatus = () => {
    return dispatch => {
        return fetch(`${BASE_URL}/api/v1/session/status`, {
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "Allow-Control-Allow-Origin": 'https://lets-meetup-app.herokuapp.com',
                "Access-Control-Allow-Credentials": "true"
            },
            credentials: "include",
        })
            .then(resp => resp.json())
            .then(data => {
                data.logged_in ? dispatch({ type: LOGGED_IN, user: data.user.data.attributes, interests: data.interests }) : dispatch({ type: LOGGED_OUT, payload: data })
            })
    }
}

Upvotes: 1

Views: 1087

Answers (2)

AssanSav
AssanSav

Reputation: 41

In config.ru adding credentials: true and specifying the domain address in origins fixed the issue

use Rack::Cors do
 allow do
   origins 'https://lets-meetup-app.herokuapp.com'
   resource '*',
       :headers => :any,
       :methods => [:get, :post, :delete, :put, :patch, :options],
       credentials: true
 end
end

import { LOGGED_IN, LOGGED_OUT, BASE_URL } from "./types"


export const sessionStatus = () => {
    return dispatch => {
        return fetch(`${BASE_URL}/api/v1/session/status`, {
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            credentials: "include",
        })
            .then(resp => resp.json())
            .then(data => {
                data.logged_in ? dispatch({ type: LOGGED_IN, user: data.user.data.attributes, interests: data.interests }) : dispatch({ type: LOGGED_OUT, payload: data })
            })
    }
}

Upvotes: 1

Thananjaya S
Thananjaya S

Reputation: 1679

Add gem 'rack-cors' in your gem file and bundle install.

Add the below snippet in your application.rb

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', 
          headers: :any, 
          expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
          methods: [:get, :post, :options, :delete, :put]
      end
    end

Upvotes: 0

Related Questions