Question

How to fix CORS on Vue.js and Nginx

Posted March 22, 2021 1.3k views
Vue.js

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

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!