跨域是什么？如何解决跨域

爱程序的大马猴

已于 2023-05-26 15:56:15 修改

阅读量74

点赞数

文章标签： javascript 前端 jquery

于 2023-05-20 16:08:20 首次发布

本文链接：https://blog.csdn.net/weixin_62922379/article/details/130781983

版权

文章介绍了浏览器的同源策略以及如何解决跨域问题。通过JSONP提供GET请求的跨域支持，利用回调函数实现数据传递。接着讨论了CORS（跨域资源共享）这一官方解决方案，它通过设置响应头允许特定或所有源的跨域请求。最后提到了使用代理（Proxy）作为另一种跨域策略。

摘要由CSDN通过智能技术生成

3跨域

3.1同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。

如何解决跨域问题？

解决方案1

利用JSONPj解决跨域，JSONP是一个非官方解决跨域的解决方案，只支持get请求

JSONP的工作原理

就是利用某些具有跨域标签的能力，比如a标签、img标签、scrpit标签
而JSOPN就是利用script具有跨域能力来解决get请求的

(JSONP、check-username、jquery-json) 服务端

// 1.引入express文件
const { response, request } = require('express')
const express = require('express')

// 创建应用对象
const app = express()
// jsonp服务
app.all('/jsonp-server', (request, response) => {
    // response.send(console.log('Hello JSONP'))
    const data = {
        name: '张三'
    }
    // 将数据转换为字符串
    let str = JSON.stringify(data)

    // 返回结果
    response.end(`handler(${str})`)
})
//用户检测是否存在
app.all('/check-username',(request,response)=>{
	const data = {
		name:'张三'
		msg:'用户已经存在'
	}
	  // 将数据转换为字符串
    let str = JSON.stringify(data)

    // 返回结果
    response.end(`handler(${str})`)
})
//jQuery中实现JSON请求
app.all('/jquery-json', (request, response) => {
    // response.send(console.log('Hello JSONP'))
    const data = {
        name: '张三',
        age: 20
    }
    // 将数据转换为字符串
    let str = JSON.stringify(data)
    // 接收callback 参数
    let cb = request.query.callback

    // 返回结果
    response.end(`${cb}(${str})`)
})
app.listen('8000',()=>{
	console.log('服务器已经启动。。。')
})

JSON数据返回格式是一个对象，因此我们需要使用JSON.stringify()转换成我们想要的JSON字符串格式,一般我们也会使用JSON.parse()方法解析JSON字符串

JSON初识

<!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>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: 1px solid #78a;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 处理数据
        function handler(data) {
            const result = document.getElementById('result')

            result.innerHTML = data.name

        }
    </script>
    <script src="http://127.0.0.1:8000/jsonp-server">

    </script>
</body>

</html>

JSON实践

<!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>案例</title>
</head>

<body>
    <input type="text" id="userName">
    <p></p>
    <script>
        // 获取元素
        const input = document.getElementById('userName')
        const p = document.querySelector('p')
        // 声明handler函数
        function handler(data) {
            // 设置边框颜色
            input.style.border = "1px solid red"
            // 设置内容
            p.innerHTML = data.msg
        }
        input.onblur = function () {
            // 获取用户输入的值
            let username = this.value
            //向服务器发送请求 检测用户是否存在
            // 创建script标签
            const script = document.createElement('script')

            // 设置script中的src属性
            script.src = 'http://127.0.0.1:8000/check-username'
            // 将script标签插入到文档中
            document.body.appendChild(script)
        }
    </script>
</body>

</html>

jQuery中实现JSON请求

<!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>jQuery-JSONP</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #539;
        }
    </style>
</head>

<body>
    <button>点击我发送请求</button>
    <div id="result"></div>
    <script>
        $(function () {
            $('button').eq(0).click(function () {
                $.getJSON('http://127.0.0.1:8000/jquery-json?callback=?', function (data) {
                    $('#result').html(`
                        姓名：${data.name}<br />
                        年龄：${data.age}
                    `)
                })
            })
        })
    </script>

</body>

</html>

解决方案2 使用Cors

Cros是什么：

全称(Cros-Origin-Resocure-Sharing) 跨域资源共享是官方的一种解决方案它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

Cros工作原理

通过设置响应头告诉浏览器，该请求是允许跨域的，让后浏览器通过响应允许跨域操作

Cros使用

router.get(“/testAJAX” , function (req , res) {
//通过 res 来设置响应头，来允许跨域请求
//res.set(“Access-Control-Allow-Origin”,“http://127.0.0.1:3000”);
res.set(“Access-Control-Allow-Origin”,“*”);
res.send(“testAJAX 返回的响应”);
});

Cros跨域服务端

const express = require('express')
//创建应用
const app = express()
//Cros服务
app.all('/cros-server',(request,response)=>{
	//设置响应头 允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*') //所有网页使用
    response.setHeader('Access-Control-Allow-Headers', '*')
    response.setHeader('Access-Control-Allow-Method', '*')
     // response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500') //指定网页使用
    response.send('Hello Cors')
})
//监听
app.listen('8000',()=>{
	console.log('服务器监听中。。。')
})

Cros客户端

<!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>Cros</title>
    <style>
        #result {
            width: 300px;
            height: 300px;
            border: 1px solid #856;
        }
    </style>
</head>

<body>
    <button>点击我发送请求</button>
    <div id="result">

    </div>
    <script>
        const btn = document.querySelector('button')
        const result = document.getElementById('result')

        btn.onclick = function () {
            // 1.创建对象
            const x = new XMLHttpRequest()
            // 初始化
            x.open('get', 'http://127.0.0.1:8000/cros-server')
            // 发送
            x.send()

            // 绑定事件 处理结果
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        // 输出响应体
                        console.log(x.response);
                        result.innerHTML = x.response
                    }
                }
            }
        }
    </script>
</body>

</html>