开发环境下我们需要使用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;'"

打开网站http://localhost/,即可,现在可以测试还存在有跨域请求。

Logo

前往低代码交流专区

更多推荐