跨域相关知识及实现跨域的方法

最新推荐文章于 2023-10-07 18:45:00 发布

console 一下

最新推荐文章于 2023-10-07 18:45:00 发布

阅读量383

点赞数 2

分类专栏：前端文章标签：跨域同源政策

本文链接：https://blog.csdn.net/qq_43288277/article/details/84331011

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

对于跨域，可能对于不了解的有一定的难度，下面就和大家聊一下关于跨域的知识。
跨域了解一下？
其实跨域就是指一个域名的网页请求其他域名网页资源，但是浏览器不能执行其他网站的脚本，根本原因是由于同源政策的限制（等一下再说同源政策），而同源政策是浏览器施加的安全限制。
同源政策？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能。所谓同源是指"协议+域名+端口"三者相同，即缺一不可。
假如没有同源政策：
网站的cookie（包括隐私）可以随意访问，自己访问一些支付宝等账号信息由于没有退出而被其他人冒充，给自己造成很大的损失。

而同源政策可以限制Cookie、LocalStorage 和 IndexDB 无法读取或者 DOM 和 Js对象无法获得以及 AJAX 请求不能发送等。
下面来看一下所谓的“同源”：
http:www.example.com:8080/local/index.html
http: 就是指的协议 www.example.com : 域名 8080 就是端口了

来几个判断吧：
file：www.example.com:8080/local/index.html 不同源（协议不同）
http:example.com:8080/local/index.html 不同源（域名不同）
http:www.example.com:8000/local/index.html 不同源（端口不同）
http:www.example.com:8080/local2/index.html 同源

下面给大家介绍几种跨域的方法：
1.jsonp跨域
这里说一下：都是自己的实例：
在这里插入图片描述

在这里插入图片描述

jsonp跨域只能用get请求

2.xhr跨域

在这里插入图片描述

3.iframe跨域

在这里插入图片描述

4.万能跨域

1.http跨域怎么说
node.js 代码：

var http = require('http')     
var https = require('https')       //这两个视接口选择
web.get('/weather',function(req ,res){
    https.get('https://www.apiopen.top/weatherApi?city=%E5%93%88%E5%B0%94%E6%BB%A8',function(sres){
        var resData = new Buffer('')
        // 当接收数据的时候
        sres.on('data',function(d){
            // 拼接数据
            resData += d
        })
        sres.on('end',function(){
            // 将接收到的数据使用json解析出来
            resData = JSON.parse(resData)
            res.send(resData)
        })
    })
})

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>跨域</button>
    <script src="jquery.js"></script>
    <script>
        $('button').click(function(){
            $.get('/weather',function(data){
                console.log(data)
            })
        })
    </script>
</body>
</html>

在这里插入图片描述

2. Axios进行跨域
axios 基于promise的跨域请求模块使用axios需要先安装

npm install --save axios

引入： import axios from ‘axios’
var API_Proxy = ‘https://bird.ioliu.cn/v1/?url=’
axios.get(API_Proxy + ‘http://open.douyucdn.cn/api/RoomApi/live/1’).then(function(data){
console.log(‘请求成功’)
console.log(data)
},function(data){
console.log(‘请求失败’)
console.log(data)
})
在这里插入图片描述

3. Proxy进行跨域
在config中index.js的proxyTable设置

proxyTable: {
    	"/dyapi":{//自定义的名字（域名映射）
    		target:"http://open.douyucdn.cn",// 设置你调用的接口域名和端口号 别忘了加url协议
    		changeOrigin: true,//是否跨域
    		pathRewrite: {
          '^/dyapi': '' //这里理解成用'/apis'代替target里面的地址，后面组件中我们掉接口时直接用api代替
          //比如我要调用'http://40.00.10.133:3002/user/login'，直接写'/apis/user/login'即可
        }
    	}
    },

在这里插入图片描述

在这里插入图片描述
下面要引入 vue-resource
在main.js中引入（全局引入使用）

在这里插入图片描述

vue-resource相关介绍：
vue-resource是vue中的一个插件。如果使用过vue的其他组件应用者会比较更容易理解vue-resource在vue中所处的状态。
简单的来说vue-resource它类似于jquery中的ajax。这个插件是vue.js对于web中利用XMLHttpRequest或JSONP提供请求和响应数据的一个服务。
下面简单的来了解一下vue-resource的相关功能和具体应用。
相关功能
vue-resource
主要特点
支持Promise API 和 URI Templates
支持拦截器在发送请求时或者在请求响应时
体积小完整大小约14kb(压缩后大小5.3kb)
对浏览器的支持程度和vue.js保持一致，支持最新的firefox, safari,Opera 和IE9以上版本

如果未引入vue-resource 程序如下：
在这里插入图片描述
以上就是我个人所掌握的跨域方法；当然还有很多种方法，还需要学习，请大家多多提建议批评！！！

console 一下

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域相关知识及实现跨域的方法

对于跨域，可能对于不了解的有一定的难度，下面就和大家聊一下关于跨域的知识。跨域了解一下？其实跨域就是指一个域名的网页请求其他域名网页资源，但是浏览器不能执行其他网站的脚本，根本原因是由于同源政策的限制（等一下再说同源政策），而同源政策是浏览器施加的安全限制。同源政策？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最...
复制链接

扫一扫