How to fix CORS on Vue.js and Nginx

Question

I have an vue application this is my nginx conf

server {

    listen 80;
    server_name building_inspection.com;
    root root_path;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

    index index.html index.htm index.php;

    charset utf-8;

    location / {
         try_files $uri $uri/ /index.html?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

I tried to send curl from terminal

root@lemp-ubuntu-s-1vcpu-1gb-nyc3-01:/etc/nginx/sites-available# curl -I -H “Origin: http://xxx.xx.xxx.xxx” -X GET “http://ec2-35-160-87-111.us-west-2.compute.amazonaws.com:PORT” HTTP/1.1 200 OK Server: Microsoft-IIS/10.0 Access-Control-Allow-Origin: http://xxx.xx.xxx.xxx Access-Control-Allow-Credentials: true Access-Control-Expose-Headers: X-Connection,X-FileName,Content-Disposition X-Powered-By: ASP.NET Date: Mon, 22 Mar 2021 13:49:57 GMT Content-Length: 110

But when i send the ajax to server i get CORS

Bobby · Answer

Hi there,

I could suggest trying out a few things to try and diagnose this further:

Ensure Your Backend Server is Configured for CORS: Ensure that the server you are making AJAX requests to (e.g., a RESTful API) has the necessary CORS headers set up.
Nginx Configuration:
- The Access-Control-Allow-Origin should be set to the domain making the request or * to allow any domain (though using * can be insecure for production applications).
- The headers you’ve set up seem correct, but it’s essential to ensure they are not overwritten elsewhere.
- If preflight OPTIONS requests are being sent by the browser, ensure that you respond to these correctly.
Handle Preflight Requests: Browsers send an OPTIONS request before sending the actual request. You’ll need to handle this.

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    try_files $uri $uri/ /index.html?$query_string;
}

For more information on the above, check out this discussion here.

Vue.js Configuration: If you are using axios or any other HTTP client library in Vue.js, make sure that you are sending requests to the correct URL and that you haven’t misconfigured any headers or other request settings.
Check the Browser Console: The browser console will provide detailed information about the CORS error. The error message will often contain the exact reason the CORS policy blocked the request.
Use Browser Tools: Tools like browser extensions or websites can help test CORS headers and ensure they’re being sent correctly.

Best,

Bobby

Report this

How to fix CORS on Vue.js and Nginx

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

Get our newsletter

The developer cloud

Get started for free