vue解决跨域方法

Posted dawang521

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue解决跨域方法相关的知识,希望对你有一定的参考价值。

1.什么是跨域

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

举例:

当前页面url                       被请求页面url                       是否跨域                            原因
http://www.test.com/        http://www.test.com/index.html       否                   同源(协议、域名、端口号相同)
http://www.test.com/        https://www.test.com/index.html       跨域                  协议不同(http/https)
http://www.test.com/        http://www.baidu.com/               跨域                  主域名不同(test/baidu)
http://www.test.com/        http://blog.test.com/               跨域                  子域名不同(www/blog)
http://www.test.com:8080/    http://www.test.com:7001/           跨域                  端口号不同(8080/7001)
2.跨域解决方法

使用proxy代理: 首先创建一个 vue.config.js文件

module.exports = {
  publicPath: \'./\',
  outputDir: \'dist\',
  assetsDir: \'static\',
  lintOnSave: process.env.NODE_ENV === \'development\',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 代理跨域的配置
    proxy: {
        // 当我们的本地的请求 有/api的时候,就会代理我们的请求地址向另外一个服务器发出请求
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
      \'/api\': {
        target: \'www.baidu.com\', // 跨域请求的地址
        changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
        secure: false, // 如果是https接口,需要配置这个参数
        // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            \'^/api\': \'\' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      }
    }
  }
}
// 注意:修改了配置文件后一定要重启才会生效
3.小结:

​ 代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现的.大概的流程: 浏览器===>代理服务器===>目标服务器.

若有不懂的地方,请加q群147936127交流,谢谢~

以上是关于vue解决跨域方法的主要内容,如果未能解决你的问题,请参考以下文章

vue跨域解决方法 及设置api路径方法

vue跨域解决方法

Java解决vue跨域问题

vue-cli3 axios解决跨域问题

vue跨域解决方法

vue解决跨域方法