使用Nginx解决Vue axios跨域访问的问题

问题描述

使用Vue的axios向一个服务发起调用请求，打开Chrome的调试工具（开发者模式），会在Console控制台输出“跨域访问策略”-即服务端不支持跨域访问。

解决办法

使用Nginx作为代理访问的服务器，proxy_pass代理最初的访问请求。配置如下，

worker_processes 1;
error_log logs/error.log;


events {
  worker_connections 1024;
}

http {

	server{
        listen  8082;

        root html;
        index index.html;

        location / {
            try_files $uri $uri/ @router;
            index index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }

        location /token {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' '*';
            proxy_pass https://your-domain/token;
        }    
    }
}

重点是以