跨域解决方法

最新推荐文章于 2024-01-10 20:55:58 发布

红烧牛肉面-加面

最新推荐文章于 2024-01-10 20:55:58 发布

阅读量142

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qiushirufeng/article/details/107954571

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

jsonp是解决跨域的方法之一

 其本质是 script标签发送请求，

原理： jsonp的实现是通过动态添加script标签从而发送http请求实现

准备一个静态页面

在3000端口提供http server并托管静态资源

在这里插入图片描述

如果没有下载插件就没有提示 live server
如果没有下载插件就没有提示插件名字： live server

效果如下

在这里插入图片描述

如果访问一个路由呢？

在这里插入图片描述

需要在服务端返回相应的数据，在浏览端获取并操作

在这里插入图片描述

将json数据包装起来并返回的一种方式 ----- 协议
在使用jsonp实现跨域的时候，它是需要将json数据作为函数的参数（packing的过程），最终在服务端将包装好的字符串作为结果返回给浏览器端。

具体代码如下

静态页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./public/jquery-1.11.3.min.js"></script> -->
</head>

<body>
    <h2>jsonp的跨域问题</h2>
    <button id="btn"> 获取jsonp</button>
    <script>
        var btn = document.querySelector('#btn')
        btn.onclick = function() {
                //发送请求   并发送一个f字符串
                addScript('http://localhost:3000/jsonp?callback=f')
            }
            //定义一个函数
        function f(res) {
            console.log(res)
        }
        // 动态添加srcipt标签 ，利用srcipt的src属性来发送请求 
        function addScript(src) {
            //创建标签 
            var script = document.createElement('script')
                //设置属性 
            script.src = src
                // 添加到dom中 
            document.body.appendChild(script)
        }
    </script>
</body>

</html>

const express = require('express')
const path = require('path')
const { callbackify } = require('util')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
    // 处理。jsonp的路由请求
app.get('/jsonp', (req, res) => {
    // res.send('alert("也是可以访问的") ')
    //获取回调函数的名称 
    let cb = req.query.callback
    res.send(cb + "('这里将是一个实参，返回给函数')")
})
app.listen(3000, () => {
    console.log('3000 ,ok')
})

在这里插入图片描述

配置跨域之rows 只需两步

由于是前后端分离开发，我们要使用ajax去给服务器要数据，先把跨域配置一下，如下：

在app.js使用之，如下：第一部下载cors 在这里插入图片描述

在app.js进行配置即可
在这里插入图片描述

红烧牛肉面-加面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域解决方法

jsonp是解决跨域的方法之一其本质是 script标签发送请求，原理： jsonp的实现是通过动态添加script标签从而发送http请求实现准备一个静态页面在3000端口提供http server并托管静态资源如果没有下载插件就没有提示插件名字： live server效果如下如果访问一个路由呢？需要在服务端返回相应的数据，在浏览端获取并操作将json数据包装起来并返回的一种方式 ----- 协议在使用jsonp实现跨域的时候，它是需要将jso
复制链接

扫一扫

专栏目录