跨域 |前端跨域的三种方式

前言

跨域是浏览器为了安全而做出的限制策略。浏览器请求必须遵循同源策略：同域名、同端口、同协议。通常在本地开发的时候，域名、端口、协议难免会与服务端给定的不一样，所以前端跨域就显得非常重要。

CORS

服务端设置，前端直接调用。下面的信息表示只允许前端的该域名访问。

JSONP

可以自己封装，也可以下载第三方插件使用：

npm install jsonp --save-dev //本质上不是请求，是一个js脚本

接口代理

假设是一个vue项目，你需要更改配置：

//vue.config.js
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        //代理：
        proxy: {
            //假设你请求的url是：/api/...
            //用了代理之后，只要在url拦截到：/api，就会跳转到target。
            //所以最终请求的url会变成：https://www.imooc.com/api/...
            '/api': {
                target: 'https://www.imooc.com',
            }
        }
    }
}

如果请求的接口没有真正的/api，这时候可以用到changeOrigin与pathRewrite：

 proxy:{
    '/api':{
        target:https:'https://www.imooc.com',
       //把主机的点设为原点，接着把/api设置为空
       //这样，请求的地址就不会有/api而是：https://www.imooc.com/...
       changeOrigin:true, 
       pathRewrite:{
           '/api':''
       }
    }
}