Post JSON from React Single Page App

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.