文章目录
- 同源策略与跨域解决
- 1、同源策略概念
- 案例
- 2、解决跨域问题
- 2.1 方法一：jsonp解决跨域问题
- 原生html实现
- jquery实现
- vue实现
- 2.2 方法二：设置CORS响应头实现跨域
同源策略（Same-Origin Policy）最早由NEtscape公司提出，是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完成相同，违背同源策略就是跨域。
案例
- server.js
- 页面文件index.html
浏览器输入，得到如下结果
2.1 方法一：jsonp解决跨域问题
- jsonp是什么
jsonp（JSON with Padding），是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发处理，只支持get请求。 - jsonp工作原理
在网页有一些标签自带跨域能力，例如img、link、iframe、script
JSONP就是利用script标签的跨域能力来发送请求的。
原生html实现
例如：
案例一：
- 测试用html文件
<!DOCTYPE html><html lang=“en”> <head>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="result"></div> <!--跨域请求--> <!--vscode中使用liveserver打开网页时，端口号为5050，所以下面的script标签中确实跨域了--> <script src="http://127.0.0.1:8000/jsonp-test"></script>
讯享网</body> </html>
- server.js文件【使用express框架模仿的服务器】
const express = require(‘express’)const app = express()
app.get(‘/jsonp-test’,(request,response) => {
讯享网// 响应一个字符串 response.send('hello jsonp')})
app.listen(‘8000’,()=>{
console.log("服务启动，监听端口中..."); })</p><p>得到的结果报错，意思为不被期待的标识符，说的是script标签不能识别普通字符串</p><p style="text-align:center;"><img src='https://s2.51cto.com/images/blog//_670b3b54af19f184.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='express session跨域后取不到值_json_03' title="在这里插入图片描述" style="width: 550px; visibility: visible;"></p><p><br></p><p> 因为响应到页面的是一个字符串，而一个script标签是不能解析字符串的，而需要响应一个js代码，因此，server.js需要响应一个js代码的字符串</p><p>const app = express()app.get('/jsonp-test',(request,response) => { // const data = { // name:"小刘" // } response.send('console.log("hello jsonp")') // response.send(`handle(${data})`)})
app.listen(‘8000’,()=>{
讯享网console.log("服务启动，监听端口中...");})
成功获取结果
打开浏览器网络，可以看到成功获取响应了，并且响应式js代码
案例二：
- server.js
const express = require(‘express’)const app = express()
app.get(‘/jsonp-test’,(request,response) => {
const data = { name:"小刘" } // 将data转换为json字符串形式 const str = JSON.stringify(data) // 利用模板字符串，将调用方法以js代码的格式响应过去 response.send(`handle(${str})`)})
app.listen(‘8000’,()=>{
讯享网console.log("服务启动，监听端口中...");})
- test.html
<!DOCTYPE html><html lang=“en”> <head>
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="result"> </div> <script> // 将方法声明在这，而方法调用通过script标签跨域传进来 function handle(data){ const result = document.getElementById('result') result.innerHTML = data.name } </script> <!-- 实现跨域 --> <script src="http://127.0.0.1:8000/jsonp-test"></script></body> </html>
查看浏览器网络，接收到的响应是一个方法调用的js代码，并且方法中的参数也是由另一端的服务器传过来的。
- 具体案例使用
- 案例描述：输入款输入用户名，判断用户名是否存在（这句逻辑就不写了）不存在，在输入框下显示”用户不存在”，输入框样式改变。
步骤：
（1）动态创建一个script标签
（2）设置script的URL
（3）将script标签添加到页面中 - 模拟服务器端代码【express框架实现】
- 页面代码
jquery实现
vue实现
2.2 方法二：设置CORS响应头实现跨域
- CORS是什么
CORS（Cross-Oringin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案。
CORS特点是不需要再客户端做人任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准增添了一组HTTP首部字段，允许服务器生命哪些源站通过浏览器有权限访问哪些资源。
- CORS工作原理
CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应’放行’ - CORS的使用
server.js
前端：
如果需要对所有的路由都解决跨域问题，那么可以写一个中间件，放在所有路由前面，如下
使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/162451.html