vue生产环境遇到跨域问题
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma.
·
开发环境下我们需要使用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/,即可,现在可以测试还存在有跨域请求。
更多推荐
已为社区贡献1条内容
所有评论(0)