解决跨域的三种方法

目录

什么是跨域?

解决跨域的三种方法

前端使用代理

使用JSONP

后端使用CORS


什么是跨域?

        在说跨域之前要先说明什么是同源策略。同源策略粗俗的讲就是属于一个家庭的,拿父亲和儿子举例。儿子找父要零花钱父亲是很合理的,那如果不是自己的孩子要钱的话,这就是不合理的情况,是否给钱取决于自己是否愿意。同源策略大概来讲就是这个意思。

        源=协议+主机+端口,只要是属于这一个源下的子路径,那么就不会出现跨域的情况,反之,如果不遵守同源策略,那么服务器就会果断的say No!

解决跨域的三种方法

  1. 前端使用代理(常用)
  2. 使用JSONP(不常用)
  3. 使用CORS(常用)

前端使用代理

        要想从前端解决跨域问题,代理是个很不错的选择,相当于多了个中间人,通过中间人的方式,进行请求的转发。代理的大概意思就是:查看当前接口请求是以什么开头,如果当前请求已经配置了代理,那么就使用经过代理后的接口路径,如果未找到该接口的代理配置,那么将有可能产生跨域问题。代理其实是配置一个微型的代理服务器,在客户端和服务器之间出现,和客户端地址保持一致。由于服务器和服务器之间请求数据并不需要ajax技术,即同源策略对服务器之间请求数据并不生效,所以不会产生跨域 。

        就拿Vue举例:

/* vue.config.js   没有该文件的话,手动创建 */
module.exports={
    pages:{
        index:{
            // 入口
            entry:"src/main.js"
        },
    },
    lintOnSave:false, //关闭语法检查
    //开启代理服务器
    devServer:{
        proxy:{
            "请求前缀":{
                target:"请求目标",
                // 重写路径,匹配以请求前缀开头的地址,相当于把请求前缀给删除
                // 重写路径的目的是因为请求前缀并不是我们所需要的资源路径,或者该前缀并不存在于资源路径中,只是为了配置代理而自己取得名字,所以需要路径重写。
                pathRewrite:{"^/请求前缀":""},
                ws:true, // 用于支持websocket
                changeOrigin:false // 用于控制请求头中host的值是否真实,false代表真实,true代表不真实
            }
        }
    }
}

使用JSONP

        使用JSONP是需要客户端与服务器之间相互配合才可以成功。那么如何进行配合呢?前端通过产生一个script元素发送请求,后端通过早就创建好的一个回调函数返回数据。

JSONP只能发送GET请求,限制比较大,现在基本没人用(个人感觉),所以这里不多说了。

后端使用CORS

        后端可以通过CORS设置允许请求资源的源有哪些。就拿Python的Flask来说,通过下载flask-cors,然后全局设置允许请求的源为 * (* 在这里表示所有),设置完成之后,不同源请求该服务器就都可以了。不同的语言有不同的CORS包,具体的信息以及使用方法可以上网查一查。

        后端设置了CORS后,就相当于该服务器能够给某些客户端发放允许请求并返回结果的权限。

猜你喜欢

转载自blog.csdn.net/txl2498459886/article/details/125412395