vue生产环境遇到跨域问题

最新推荐文章于 2026-03-08 04:50:44 发布

原创最新推荐文章于 2026-03-08 04:50:44 发布 · 5.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端开发

当前文章被收录于：

前端开发

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何利用Docker和Nginx在开发环境中代理Vue项目的API接口，解决跨域请求问题。通过Docker运行Nginx容器，配置Nginx代理/api接口至目标服务器，实现本地开发环境的跨域访问。

开发环境下我们需要使用nginx做代理，例如接口为http://ip/api，我们则可以将api接口代理出去。

所用技术：docker，nginx。

讲一下逻辑：
1.vue项目打包，打包到dist文件夹下。
2.nginx做容器，并且代理/api接口。（其他接口就继续加location）
3.使用docker来启动nginx。

下面是nginx的配置：(保存为 web.conf 文件)

server {
	listen 80 default_server;
	listen [::]:80 default_server;
	client_max_body_size 10M;

	root /web;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

    location / {
        root   /web;
        index  index.html index.htm;
    }

    location /api {
    	add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://ip/api;
    }
}

我这里有一个写好的docker文件，可以根据自己所使用进行修改。

version: '2'
services:
    web:
        image: nginx:latest
        volumes:
            - ./web.conf:/etc/nginx/conf.d/mysite.template
            - ./dist:/web
        ports:
            - 80:80
        command: /bin/bash -c "envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"