关于vue.js: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 交换，谢谢~