0
  • [ 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.

Ali Seivani
  • 496
  • 3
  • 21
  • The "Access-Control-Allow-Origin" header has to be added to the back end, not the front end. – Arrowsmith Nov 19 '21 at 22:24
  • The filter I mentioned is added to Wordpress and the WPGraphql Cors plugin is suppose to set the Access-Control-Allow-Origin in backend side. – Ali Seivani Nov 20 '21 at 23:16

0 Answers0