No 'Access-Control-Allow-Origin' header is present using Axios to post a comment

833 Views Asked by At
  • [ A CORS policy error ]
  • [ Gridsome as front and Axios for HTTP requests ]
  • [ WP-Graphql v1.6.7 ]
  • [ WPGraphQL Cors installed ]
  • [Access to XMLHttpRequest at ''https://my_wp_backend.com' from origin 'http://my_gridsome_front.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.]

Axios request

    addComment() {
      axios({
      url: 'https://my_wp_backend.com',
      method: 'post',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      withCredentials: true,
      data: {
        query: `mutation CREATE_COMMENT {
                createComment(input: {
                  commentOn: 329, 
                  content: "Lorem ipsum", 
                  author: "John"
                }) {
                  success
                  comment {
                    id
                    content
                    author {
                      node {
                        name
                      }
                    }
                  }
                }
              }`
            }
      })
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.log(err.message);
      });
    }

I've added a filter to my theme too

add_filter(
    'graphql_response_headers_to_send',
    function( $headers ) {
        $headers['Access-Control-Allow-Origin'] = 'https://my_gridsome_front.com';
        return $headers;
    }
);

in WPGraphQL Cors settings, Add Site Address to "Access-Control-Allow-Origin" header = Checked

I still cant get over the CORS error after installing CORS plugin, following all instructions in docs and going through all related repo issues. Any hints is very much appreciated.

0

There are 0 best solutions below