同源策略与跨域

同源：协议，域名，端口相同

同源

图片.png

ajax为了获取同源数据，不能获取非同源数据。

跨域

方法：引入外部js,php文件

图片.png

图片.png

动态生产script标签：

图片.png

图片.png

图片.png

获取百度提示词：

图片.png

1、JSONP跨域
jsonp的原理就是利用

服务端返回如下（返回时即执行全局函数）：

handleCallback({"success": true, "user": "admin"})

2.jquery Ajax实现：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {}
});

3.vue跨域
直接修改webpack.config.js配置。开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。
webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}

5、document.domain + iframe跨域
此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

图片.png

参考：9种常见的前端跨域解决方案（详解）