待看

跨域的解决方案

2021-03-01  本文已影响0人  大萝蓓

跨域的解决方案
script,img,link,iframe,不存在跨域请求限制。
1、JSONP,

script//基于script标签做的跨域
src="http://127.0.0.1:4000/list?callvack=func"
function func(){//这个函数必须是全局函数
···
}

客户端向服务器发请求,同时会把本地的一个函数传递给服务器,服务器接受客户端的请求,同时拿到了callback=func。1、准备数据data={...}。2、给客户端返回数据,返回的一个字符串‘func(’+JSON.stringify(data)+')'。客户端接受到就开始搞事情了。
问题:1、JSONP只能处理GET请求。2、安全性不好。

2、CORS跨域资源共享
客户端正常发请求,
服务器端通过设置请求头允许源发送跨域请求(需要处理options试探性请求)。
问题是不能用cookie,因为设置所有源都可以访问,这样传来传去会导致会不安全。
3、proxy跨域代理

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.baidu.com/',
                pathRewrite: {
                    '^/api': ''
                },
                changeOrigin: true,
                secure: false,
            }
        }
    }
}

'/api':捕获api的标志,如果api中有这个字符,那么就开始匹配代理,比如以上例子api请求/api/login,就会被代理到 'http://www.baidu.com/api/login'
target:代理api地址,就是需要跨域的api地址。地址可以是域名,可以是IP地址。如果是域名的话需要加一个参数changeOrigin:true,否则会代理失败。
pathRewrite:路径重写,也就是说会修改最终请求的api路径,比如访问的api路径/api/login,设置pathRewrite:{'^/api':' '}后,最终代理访问的路径为 'http://www.baidu.com/login',这个参数的目的是重新命名后,在访问时把命名删除掉。
changeOrigin:这个参数可以让target参数是域名。
secure:false,不检查安全问题。设置后接受运行在https上可以使用无效证书的后段服务器。
4、ngnix反向代理,前端知道这个不需要前端做什么。
5、postMessage
6、scket.io实时通讯
7、webSocket协议跨域
8、document.domain+iframe
只能实现:同一个主域,不同子域之间的操作

上一篇下一篇

猜你喜欢

热点阅读