使用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;
        }    
    }
}

重点是以下的内容，

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';

其他部分为部署vue应用的配置，用来部署vue应用打包构建后的内容。

简要描述Vue构建打包和部署的过程

Nginx的的目录结构如下，

• your_dir/
  • conf 放置nginx.conf文件
  • logs nginx启动后生成的日志文件，包括access.log,error.log，以及nginx启动进程的进程号nginx.pid
  • html 网站的静态文件，如js、css、htlm、img等
    Nginx的启动命令，如下，

1. nginx -c conf/nginx.conf
2. nginx -c conf/nginx.conf -s reload/stop

Vue 应用目录，结构为

• your_app/
  • public
  • src
  • vue.config.js

1. 构建打包yarn build
2. 部署，即拷贝dist/目录下的文件到your_dir/html目录中。

拷贝到html目录之后，重新启动Nginx服务，即可访问 http://localhost:8082。