解决跨域的三种方法

最新推荐文章于 2024-04-17 08:00:00 发布

Z.Meng

最新推荐文章于 2024-04-17 08:00:00 发布

阅读量1.9w

点赞数 5

分类专栏：跨域文章标签：前端

本文链接：https://blog.csdn.net/zm17671443092/article/details/108686700

版权

跨域专栏收录该内容

1 篇文章 0 订阅

订阅专栏

解决跨域的三种方法

在这里插入图片描述

一.为什么会产生跨域问题？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

当一个请求的url的协议、域名、端口三者只要有一个与当前页面的url不同则会出现跨域问题
在这里插入图片描述

二.解决跨域的方式

2.1在服务端设置请求头，一般都是用于项目测试阶段。

Access-Control-Allow-Credentials属性代表后端允许发送Cookie
Access-Control-Allow-Origin属性代表允许访问的域（协议+域名+端口）如果设置为*代表允许全部访问
Access-Control-Allow-Methods属性代表允许请求的方式

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        $("button").click(()=>{
            $.ajax({
                url : "http://localhost:8081/getData",
                type : "get",
                success(data){
                    console.log(data)
                }
            })
        })
    </script>
</body>
</html>

Node.js后台：

var http = require('http');
http.createServer(function(request, response) {
    response.writeHead(200, {
        'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie
        'Access-Control-Allow-Origin': '*', // 允许访问的域（协议+域名+端口）
        'Access-Control-Allow-Methods': "POST,GET,DELETE,PUT,OPTIONS" // 允许请求方式用着五种
    })
    if (request.url == "/getData") {
        const data = {
            status: "ok",
            data: [{
                    name: '张三',
                    age: 10
                },
                {
                    name: '张三',
                    age: 10
                },
                {
                    name: '张三',
                    age: 10
                }
            ]
        }
        response.end(JSON.stringify(data))
    }
}).listen(8081,function(){
    console.log("服务启动成功");
});

2.2JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个< script >元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。JSONP是解决跨域的方法之一，它与AJAX并无任何关联。

2.2.1原生JSONP

了解了JSONP的核心思想我们来写一个简单的JSONP
前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function json(data){
            console.log(data)
        }
    </script>
    <script src="http://localhost:3000/jsonp"></script>
</body>
</html>

Node.js后台

const http = require("http")
const fs = require("fs")
const url = require("url")
 
const server = http.createServer()
server.on("request",(req,res)=>{
    const urlObj = url.parse(req.url,true)
    const query = urlObj.query
    const pathname = urlObj.pathname
    // console.log(query)
    // console.log(req.url)

    if(pathname == "/test" && req.method == "GET"){
        res.end("test({'name':'jack'})")
    }else if(pathname == "/jsonp" && req.method == "GET"){
        const data = {
            status : "ok",
            data : [
                {
                    name : '张三',
                    age : 10
                },
                {
                  name : '张三',
                  age : 10
              },
              {
                  name : '张三',
                  age : 10
              }
            ]
        }
        res.writeHead(200,{
            "content-type" : "application/json;charset=utf8"
        })
        let datastr = JSON.stringify(data)
        console.log(query.callback)
        res.end(query.callback + "(" + datastr +")")
    }
})
server.listen(3000)

2.2.2JQuery中的JSONP

众所周知在JQuery中的AJAX只要将dataType改成 "jsonp"类型就能使用JSONP来实现客户端与服务端之间通信，所以在面试当中经常会被问到，JSONP到底属不属于AJAX，小伙伴们回答这个问题的时候一定要坚定，JSONP与AJAX没有任何关系。

JQuery中的AJAX就是将原生的JSONP方法封装在了自身当中，其实两者之间没有任何关系。

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        // 原生的JSONP方法
        function addScript(src){
            var script = document.createElement("script")
            script.src = src;
            document.body.appendChild(script)
        }
        window.onload = function(){
            addScript("http://localhost:3000/jsonp?callback=abc")
        }
        function abc(data){
            console.log(data)
        }
        // jquery中的jsonp  就是把上面的代码封装在ajax工具方法中
        $.ajax({
            type : "GET",
            dataType : "jsonp",
            url : "http://localhost:3000/jsonp",
            success : function(data){
                console.log(data)
            }
        })
    </script>
</body>
</html>

Node.js后台

const http = require("http")
const fs = require("fs")
const url = require("url")
 
const server = http.createServer()
server.on("request",(req,res)=>{
    const urlObj = url.parse(req.url,true)
    const query = urlObj.query
    const pathname = urlObj.pathname
    // console.log(query)
    // console.log(req.url)

    if(pathname == "/test" && req.method == "GET"){
        res.end("test({'name':'jack'})")
    }else if(pathname == "/jsonp" && req.method == "GET"){
        const data = {
            status : "ok",
            data : [
                {
                    name : '张三',
                    age : 10
                },
                {
                  name : '张三',
                  age : 10
              },
              {
                  name : '张三',
                  age : 10
              }
            ]
        }
        res.writeHead(200,{
            "content-type" : "application/json;charset=utf8"
        })
        let datastr = JSON.stringify(data)
        console.log(query.callback)
        res.end(query.callback + "(" + datastr +")")
    }
})
server.listen(3000)

为啥反复说JSONP与AJAX没有任何关系呢？

下图是用JSONP向服务端发送的请求，type联类型为scrpt，这与JSONP的核心思想相对应。

在这里插入图片描述
下图是用AJAX向服务端发送的请求，它的type类型为一个xhr对象，AJAX的源码就是先创建一个xhr的对象，然后发送请求，所以JSONP与AJAX没有任何关系，只是AJAX封装了JSONP。

在这里插入图片描述

2.3代理服务器

这也是解决跨域一种方法之一，这个暂时留到下次再讲

Z.Meng

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
解决跨域的三种方法

解决跨域的三种方法一.为什么会产生跨域问题？出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。当一个请求的url的协议、域名、端口三者只要有一个与当前页面的url不同则会出现跨域问题二.解决跨域的方式2.1在服务端设置请求头，一般都是用于项目测试阶段。Acce
复制链接

扫一扫