vue axios 跨域请求代理

最新推荐文章于 2022-11-15 17:21:59 发布

原创最新推荐文章于 2022-11-15 17:21:59 发布 · 390 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过配置vue.config.js实现Vue项目中的axios跨域请求，并展示Nginx服务器的具体配置方法来支持Vue单页应用的路由及实现跨域代理。

1. vue.config.js的配置

module.exports = {
    publicPath: './',

    devServer: {
        // axios 跨域代理
        proxy: {
            '/api': {
                target: 'http://192.168.10.129:5000',
                changeOrigin: true
            }
        }
    }
}

2. 实际发起请求时候 baseURL 前面主机和端口省略不用写

在这里插入图片描述

3. nginx 配置

	server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root        C:/Users/a/WebstormProjects/checkduty/dist;#vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        # axios 跨域代理
		location /api {
            proxy_pass   http://192.168.10.129:5000;
        }
	}