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

最新推荐文章于 2024-08-02 00:06:36 发布

qq_40984466

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量3.8k

点赞数 1

分类专栏： Web前端文章标签： Vue Nginx

本文链接：https://blog.csdn.net/qq_40984466/article/details/91431944

版权

本文介绍了在Vue应用中遇到跨域访问问题时，如何利用Nginx作为代理服务器进行解决。详细讲解了Nginx的配置方法，特别是`proxy_pass`指令的使用，以及Vue项目的构建打包和部署过程。

摘要由CSDN通过智能技术生成

目录索引

问题描述
解决办法
简要描述Vue构建打包和部署的过程

问题描述

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

重点是以