VUE 代理服务器实现跨域

最新推荐文章于 2024-08-16 10:15:00 发布

好菜的程序媛

最新推荐文章于 2024-08-16 10:15:00 发布

阅读量552

点赞数 2

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

本文链接：https://blog.csdn.net/gomeer/article/details/107186930

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子：

协议跨域
http://a.baidu.com访问https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
#域名跨域
http://a.baidu.com访问http://b.baidu.com；

代理服务器实现前端跨域请求后端地址

1.config index.js下配置proxyTable


  proxyTable: { 
    '/api': { 
        target: 'https://1.2.3.4:89', // 接口地址 
        changeOrigin: true, // 是否跨域 
        pathRewrite: { 、// 转发 '^/api': '' }, 
        secure: false, 
      } 
    }

2.src/api/index.js 配置baseURL

const debug = process.env.NODE_ENV !== 'production'
const axInstance = axios.create({
    baseURL: debug ? 'api' : 'http://1.3.4.5.6:89',
    timeout: 10000,
    responseType: 'json',
    withCredentials: false, // 表示跨域请求时是否需要使用凭证
    headers: {
        token: store.state.axios.token,
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
})