I’m trying to post json data from single page app with react and axios.
I would like to resister member with JSON post.
However I had following error.
** (Plug.CSRFProtection.InvalidCSRFTokenError) invalid CSRF (Cross Site Request Forgery) token, make sure all requests include a valid '_csrf_token' param or 'x-csrf-token' header
Do you think there are any solutions for this error?
function register(state, action) {
console.log('member: ' + JSON.stringify(state.member))
const url = 'headers: {"Content-Type": "application/json"},\n' +
' data: { member:' + JSON.stringify(state.member) + '}';
axios.post('/members', url)
.then(function (response) {
// handle success
console.log(response.data);
let data = response.data;
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}
I suggest you create an API endpoint /api/members
to handle this. Just Google Phoenix and API.
I had already have end point I made.
Are there something wrong?
How should I avoid CSRF errors?
defmodule ReactPhoenixReduxWeb.MemberView do
use ReactPhoenixReduxWeb, :view
alias ReactPhoenixReduxWeb.MemberView
def render("index.json", %{members: members}) do
%{data: render_many(members, MemberView, "member.json")}
end
def render("show.json", %{member: member}) do
%{data: render_one(member, MemberView, "member.json")}
end
def render("member.json", %{member: member}) do
%{id: member.id,
last_name: member.last_name,
first_name: member.first_name,
email: member.email,
passwd: member.passwd}
end
end
scope "/", ReactPhoenixReduxWeb do
pipe_through :browser
get "/", PageController, :index
resources "/members", MemberController, except: [:new, :edit]
end
This:
pipe_through :browser
You should use a dedicated pipeline, not :browser
.
Thanks. Error changed.
[debug] ** (Phoenix.ActionClauseError) no function clause matching in ReactPhoenixReduxWeb.MemberController.create/2
That is strange… url is not url, but params to pass.
I have something like this for a React SPA, using axios, with Phoenix. I pass an object, and if needed, I can add authorized headers.
import axios from 'axios';
import { ROOT_URL } from '../config/';
const authHeaders = token => ({
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
credentials: 'same-origin',
});
const Api = {
signin: params => axios.post(`${ROOT_URL}/authentication`, { session: params }),
signup: params => axios.post(`${ROOT_URL}/registration`, { user: params }),
refreshToken: token => (
axios.patch(
`${ROOT_URL}/authentication/refresh`,
{ session: { token } },
authHeaders(token),
)
),
signout: token => axios.delete(`${ROOT_URL}/authentication`, authHeaders(token)),
};
export default Api;
Try without JSON.stringify
.