vue H5 https跨域请求实现

986 阅读1分钟

什么是跨域

相同的协议(比如http和https就不行)、相同域名、和相同端口号(port),否则就是跨域,

在App、小程序等非H5平台,是不涉及跨域问题的。

开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域。

解决方式

在vue.config.js中配置代理服务器

  devServer: {
    proxy: {
      '/axios': {
        target: `https://xxx.zhxxxxxx.com`,
        changeOrigin: true,
        pathRewrite: {
          '^/axios': '/tk.php',
          '^/apii': '/',
        }
      },
      // 配置第三方接口
     '/analytics': {
        target:'https://analytics.oceanxxxx.com', // 你请求的第三方接口
        changeOrigin:true, // 是否跨域 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收
        请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        secure:true,//设置支持https协议的代理
        pathRewrite:{  // 路径重写,
          '^/analytics': 'https://analytics.oceanxxxx.com'  // 替换target中的请求地址,
        }
      }
    },