No ‘Access-Control-Allow-Origin’ header is present

  • Resolved kreeem

    (@kreeem)


    6 years ago

    Hi,

    I am using this plugin for my React.js application for user registrations / authentications, however I am getting a

    No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    error every time when I am trying to authenticate a user. (This error is not present when I am calling the “built-in” endpoints of the rest api, like fetching posts / comments etc. )

    My wordpress back end is located on https://api.my-site.com
    any my front end is on https://my-site.com

    I am getting the same error in both cases when I try to authenticate the user from localhost:3000, and from my-site.com

    Error:
    Access to XMLHttpRequest at 'https://api.my-site.com/api/user/generate_auth_cookie/?nonce=0d852f970e&username=username&password=password' from origin 'https://localhost:3000' 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.

    I already added to my .htaccess file in the folder where the wordpress backend is:

    <IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

    I also tried to add some headers to the index.php file: 

    <?php
    header ("Access-Control-Allow-Origin: *");
    header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
    header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
    header ("Access-Control-Allow-Headers: *");

    This drives me crazy… could you please help me?

    Thanking in advance!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ali Qureshi

    (@parorrey)

    First method:

    Please open file api.php, file is located in wp-content/plugins/json-api/singletons/api.php (JSON API Plugin)

    Please add at the top before any white space:

    <? header("Access-Control-Allow-Origin: *"); ?>

    Or you can use following:

    Second method:

    Add following code in your theme functions.php file:

    
function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

    Hope that helps.

    Thread Starter kreeem

    (@kreeem)

    Hi Ali,

    Thank you for the quick reply. Unfortunately neither method was working.

    I even reinstalled both JSON API, and JSON API USER plugins, then edited api.php file again.

    I also tried editing two different wordpress themes functions.php, but Im still getting the same error message.

    However, while I am using “Allow-Control-Allow-Origin: *” Google Chrome plugin, the issue is not present. (This is a suitable solution while developing, but not on production. )

    Do you have maybe other suggestion?

    Plugin Author Ali Qureshi

    (@parorrey)

    First method works for me. I have also used second method in the past. I think issue is somewhere else, you should try it on new wordpress install.

    Thread Starter kreeem

    (@kreeem)

    Thanks Ali for the support!

    I finally find a solution, by adding an additional ‘Access-Control-Allow-Origin’: ‘*’ header into my post requests.

    Code 

    axios({
   method: 'post',
   url: "https://my-site.com/myapi/user/generate_auth_cookie/?nonce=${nonce}&username=${username}&password=${password}",
   config: {
       headers: {
         'Access-Control-Allow-Origin': '*',
       }
   }
})
    • This reply was modified 6 years ago by kreeem.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘No ‘Access-Control-Allow-Origin’ header is present’ is closed to new replies.