Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.2.9:5055/webhooks/rest/webhook. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

When i trying to access action_endpoint i getting the above error. I am using rasa 1.0.6

this is the command i used to run rasa run --cors [“*”] --endpoints endpoints.yml --debug --enable-api and for the action: python3 -m rasa_core_sdk.endpoint --actions actions

In the browser console, i get the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.2.9:5055/webhooks/rest/webhook. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

And in the terminal of actions,

192.168.2.56 - - [2019-09-17 09:58:44] “OPTIONS /webhooks/rest/webhook HTTP/1.1” 404 341 2.407519

I hosted my static webpage using nginx server.

here is the nginx configuration

/etc/nginx/sites-available/default server { listen 80 default_server; listen [::]:80 default_server;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /var/www/rasachat/Chat-2;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;
    location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            #add_header 'Access-Control-Allow-Origin' 'origin-list'
            add_header 'Access-Control-Allow-Origin' '*';
            try_files $uri $uri/ =404;
    }
  }

endpoints.yml

action_endpoint:
url: http://192.168.2.9:5055/webhook

credential.yml

rest:
rasa:
url: "http://192.168.2.9:5002/api"

*.js

 $.ajax({
  url: "http://192.168.2.9:5055/webhooks/rest/webhook",
  contentType: 'application/json; charset=utf-8',
  type:"POST",
  data:
    JSON.stringify({"sender":"Rasa",
    "message":userMsg
  }),
  success: function(results){
      generateMessage(results,'user',INDEXX);
  }

});

How can i resolve this?

Can you try --cors "*" instead of --cors ["*"]?

I resolved that error by replacing the port in ajax call. i replaced the port 5055 with 5005, then it works.

The Same Origin Policy (SOP) is the policy browsers implement to prevent vulnerabilities via Cross Site Scripting (XSS). In other words, the browser would not allow any site to make a request to any other site. It would prevent different origins from interacting with each other through such requests, like AJAX. This policy exists because it is too easy to inject a link to a javascript file that is on a different domain. This is a security risk - you really only want code that comes from the site you are on to execute and not just any code that is out there.

The Cross Origin Resource Sharing (CORS) is one of the few techniques for relaxing the SOP. Because SOP is “on” by default, setting CORS at the server-side will allow a request to be sent to the server via an XMLHttpRequest even if the request was sent from a different domain. This becomes useful if your server was intended to serve requests from other domains (e.g. if you are providing an API).

JSON with Padding is just a way to circumvent same-origin policy, when CORS is not an option. This is risky and a bad practice. Avoid using this.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999