Vue跨域配置

最新推荐文章于 2024-04-10 23:56:59 发布

Try:

最新推荐文章于 2024-04-10 23:56:59 发布

阅读量341

点赞数 11

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43129075/article/details/136154947

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以Vue3 Ts为例：

开发环境vue.config.js增加配置

devServer: {
    port: 8080, 
    allowedHosts: "all",
    proxy: {
      '/api': {
        target: "http://localhost:5000/",//这里只有开发模式才会生效
        changeOrigin: true,
        pathRewrite:{
          '^/api':'/api',
        }
      }
    }
  }

因为所有api接口统一以：‘域名+/api/具体接口’ 这种格式组成所以匹配api开始的地址
在这里插入图片描述

注：以上仅适用开发模式，生产环境不生效

生产环境

以docker为例，docker中使用nginx部署，配置：

# 部署使用的api地址
ARG api=http://gateway/api/
RUN echo "server {" >> /etc/nginx/conf.d/default.conf  
RUN echo "    listen 80;" >> /etc/nginx/conf.d/default.conf 
RUN echo "    location / {" >> /etc/nginx/conf.d/default.conf 
RUN echo "        root /usr/share/nginx/html;" >> /etc/nginx/conf.d/default.conf 
RUN echo "        index index.html index.htm;" >> /etc/nginx/conf.d/default.conf 
RUN echo "    }" >> /etc/nginx/conf.d/default.conf 
RUN echo "    location /api/ {" >> /etc/nginx/conf.d/default.conf 
RUN echo "        proxy_pass $api;" >> /etc/nginx/conf.d/default.conf 
RUN echo "    }" >> /etc/nginx/conf.d/default.conf 
RUN echo "}" >> /etc/nginx/conf.d/default.conf