proxy代理解决vue中跨域问题

一，为什么产生跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二，解决跨域得到方法

1.CORS方式

2.proxy

在vue中配置代理proxy解决跨域

1.target中有api 用 pathRewrite 去重写路径

 module.exports ={
    devServer:{
        proxy:{
            '/api':{   //  /api表示拦截/api开头的请求路径
                // target:'https://www.vue-js.com/api/v1/topics',
                target:'https://www.vue-js.com/api', // 跨域的域名（不需要写路径）
                changerOrigin:true,    // 是否开启跨域
                pathRewrite:{          // 重写路径    ，这里的重写路径不是重写上面target的路径，
                                       // 、是重写页面中请求的，例如AboutView中的  ‘api/v1/topics' 把这里面的pai变为空
                    '^/api':""         //  把/api变为空字符串
                }
            }
        }
    }
 }

2.target中有没有api 不用 pathRewrite 去重写路径

下面展示一些 内联代码片。

module.exports = {
    devServer: {
        // host: "0.0.0.0", // 如果想要被外部访问，则需设置为 "0.0.0.0"
        port: 8080, //指定一个端口号，并监听来自这个端口的请求；
        // https: true, // false 表示使用 HTTP
        open: true, // true 表示启动应用之后自动打开默认浏览器。
        proxy: {
            '/api': {
                target: "https://www.vue-js.com",
                changerOrigin: true,
            }
        },

        // outputDir: 'dist', // 输出文件目录  npm run build

    }
}