XMLHttpRequest cannot load http: // localhost: 3000 / players / 1. Preflight response has invalid HTTP 404 status code
I am creating react app with rails api. I have a player_controller with create, index, update actions. I can do everything (create, index, update) from the postman. But when I tried a fetch request from react action. I could only index and create a player model. On upgrade, I get this error in the debugger console.
:3000/players/1:1 OPTIONS http://localhost:3000/players/1
XMLHttpRequest cannot load http://localhost:3000/players/1. Response
for preflight has invalid HTTP status code 404
in Rails my players_controller.rb
class PlayersController < ApplicationController
skip_before_action :verify_authenticity_token
respond_to :json
def index
@players = Player.find_by(player_id: params[:player_id])
player = Player.all
render json: @players
end
def create
player = Player.new(player_params)
if player.save
render json: player, status: 201
else
render json: { errors: player.errors }, status: 422
end
end
def update
player = Player.find(params[:id])
player.update(player_params)
if player.save
render json: player, status: 201
else
render json: { errors: player.errors }, status: 422
end
end
private
def player_params
params.require(:player).permit(:username, :profile_pic, :player_id)
end
end
In my react based app I have an action
export const profilePicUpdate = (player, profile) => (dispatch) => {
const obj = player;
obj.profile_pic = profile;
fetch(`http://localhost:3000/players/${player.id}`, {
method: 'PATCH',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
obj
})
}).then(() => {
dispatch({
type: 'PROFILE_PIC_UPDATE',
payload: profile
});
NavigatorService.navigate('Profile');
}).catch((error) => {
console.log('Error', error);
});
};
source to share
You need to look at your roues.rb file, but you might also need to add the rack-corse gem and customize it
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins '*'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
in config/initializers/cors.rb
source to share