前端跨域笔记

最新推荐文章于 2024-06-14 11:01:38 发布

洛.rar

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量171

点赞数

分类专栏：一些零零散散的知识文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/qq_51606563/article/details/126715009

版权

一些零零散散的知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

跨域

同源策略

同源：协议，域名，端口号，必须完全相同

违背同源的就是跨域

如何解决跨域问题

JSONP
- 什么是jsonp 非官方的程序员自己开发的，只支持get
- jsonp怎么工作在网页有一些标签天生具有跨域能力，比如img link iframe script jsonp就是利用script标签的跨域能力来发送请求的
- jsonp的使用
  1. 动态创建一个script标签
  2. 设置script的src，设置回调函数

JSONP

jsonp的重点其实就是使用script解决跨域问题

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

<body>
    <center>
        用户姓名：<input type="text" id="username">
        <p></p>
        <script>
            //获取input中的元素
            const input = document.querySelector('input');
            const p = document.querySelector('p');

            //声明handler函数
            function handler(data) {
                input.style.border = 'solid 1px #f00';
                //修改标签的提示文本
                p.innerHTML = data.msg;
            }

            input.onblur = function() {
                //获取用户输入值
                let username = this.value;
                //向服务端发送请求检测用户名是否存在
                //创建一个script标签
                const script = document.createElement('script')
                    //设置标签的src属性
                script.src = 'http://127.0.0.1:8000/server';
                //将script插入到文档中 把script标签插入到body标签的最后
                document.body.appendChild(script);

            }
        </script>
    </center>
</body>

</html>

//引入
const { response, json } = require('express');
const express = require('express');

//创建引用对象
const app = express();

//创建路由规则
app.all('/server', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Origin', '*');

    //检测用户名是否存在
    const data = {
        exist: 1,
        msg: '用户名存在'
    }
    let str = JSON.stringify(data);

    //注意这边的符号
    response.end(`handler(${str})`);
})

app.listen(8000, () => {
    console.log('监听中');
})

jsonp与JQuery

<!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>
    <!-- 引入jquery -->
    <script type="text/javascript" src="E:\文件夹的文件夹\API文档\JQ\jquery-3.6.0.js"></script>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: red solid 1px;
        }
    </style>
</head>

<body>
    <center>
        <button>发送jquery请求</button>
        <div id="result"></div>
        <script>
            $('button').eq(0).click(function() {
                $.getJSON('http://127.0.0.1:8000/server?callback=?', function(data) {
                })
            });
        </script>
    </center>
</body>

</html>

//引入
const { response, request } = require('express');
const express = require('express');

//创建对象
const app = express();

//创建路由规则
app.all('/server', (require, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');

    const data = {
        name: '我的老公',
        husband: ['索隆', '银时']
    }
    let str = JSON.stringify(data);
    //接受callback
    let cb = request.query.callback;
    response.end(`${cb}(${str})`)
})

//监听器
app.listen(8000, () => {
    console.log("监听持续中能够");
})

CORS

定义跨域资源共享，他的特点是不需要再客户端做任何特殊操作，完全在服务器中进行处理
跨源资源共享（CORS） - HTTP | MDN 详细内容在这里

我们用的下面这个就是了

response.setHeader('Access-Control-Allow-Origin', '*');

洛.rar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端跨域笔记

关于前端解决跨域问题的方法
复制链接

扫一扫

专栏目录