• 前后端跨域解决方案——jsonp,core,代理服务器

     

    一，什么是跨域

    为了安全起见，必须遵守浏览器的同源策越：保证 域名 ，协议 ，端口号 都一致。才能请求到后端数据。 

     

     

     

    二，解决方案

     当出现跨域问题时，前后端都有不同的解决方案。

    1.手写jsonp解决跨域问题

    它的主要原理是通过动态构建 script 标签来实现跨域请求，因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数，然后服务器在返回数据的时候，构建一个 json 数据的包装，这个包装就是回调函数，然后返回给前端，前端接收到数据后，因为请求的是脚本文件，所以会直接执行，这样我们先前定义好的回调函数就可以被调用，从而实现了跨域请求的处理。这种方式只能用于 get 请求。

     这里手写一个服务器，返回简单地接口数据如下

     

    1. const http = require('http')
    2. const url = require('url')
    3. const server = http.createServer()
    4. server.on('request', (req, res) => {
    5.     const urlObj = url.parse(req.url, true)
    6.     console.log(urlObj.query.callback);
    7.  
    8.     switch (urlObj.pathname) {
    9.         case '/api/aaa':
    10.             // 给前端传递一个函数
    11.             res.end(`${urlObj.query.callback}(${JSON.stringify({
    12.                 name: 'zhang',
    13.                 age: 15
    14.             })})`)
    15.             break;
    16.         default:
    17.             res.end('404')
    18.     }
    19. })
    20. server.listen(3000, () => {
    21.     console.log('服务器启动');
    22. })

    在index.html中

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     
    13.     <script>
    14.            //创建script标签
    15.         var aa = document.createElement('script')
    16.            //引入将要访问的后端接口，并传入一个回调函数
    17.         aa.src = 'http://localhost:3000/api/aaa?callback=fun'
    18.           //将script标签引入到页面上
    19.         document.body.appendChild(aa)
    20.         function fun(obj) {
    21.             console.log(obj);
    22.         }
    23.     script>
    24. body>
    25.  
    26. html>

    如图所示，在浏览器上成功请求到数据 

     2.core解决跨域问题

    下载模块

    1.  
    2. # Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站
    3.  
    4. npm i express 或者 npm install express # 首先安装服务器模块
    5.  
    6. npm i cors 或者 npm install cors # 再安装解决跨域模块
    7.  
    8. npm i axios  # 用来发送请求

    引入模块

    1.  
    2. # 引入安装的两个模块
    3. const express = require('express');
    4. const cors = require('cors');
    5. const app = express(); # 初始化模块创建个对象
    6.

    使用

    1.  
    2. app.use(express.json());       # 解析json编码数据
    3. app.use(express.urlencoded()); # 解析url编码的数据
    4. app.use(cors());  #  不加上这句代码跨域访问时会出现错误，加上就不会出现跨域错误情况
    5.  
    6. # 进行各种方式的请求, 第一个参数都是路由，提供给前端的接口做代理用，以post方式举例，提供一个代理服务器
    7. # 用nodejs请求数据然后把数据返回给前端就行
    8. app.post("/api", (req, res) => {
    9.     const { url } = req.body;
    10.     // console.log(req.body);
    11.     axios.get(url)
    12.         .then(result => {
    13.             res.json(result.data);
    14.         })
    15.         .catch(err => {
    16.             console.error(err);
    17.         })
    18. })
    19.  
    20. # 第一个参数是端口号
    21. app.listen(3000, ()=>{
    22. 	console.log("运行在3000端口")
    23. });
    24.  
    25. # 前端通过访问后端提供的接口
    26. $.post("后端接口", 
    27. # 把需要请求数据的网址传给nodejs后端
    28. { url: "要请求数据的网址" }) 
    29.   .then(res => {
    30.       console.log(res)  # 最后后端把请求的数据返回给前端，这样就解决了跨域，但是是由后端解决的
    31.   })
    32.   .catch(err => {
    33.       console.error(err);
    34.   })
    35.

    3.代理服务器解决

    如果后端没有解决跨域，前端通过代理服务器进行解决

    这里之前后写过👇

    vue中解决跨域问题

  • 相关阅读:
    C++加持让python程序插上翅膀——利用pybind11进行c++和python联合编程示例
    【YOLOv5入门】目标检测
    如果线性变换可以模仿
    springboot~elasticsearch对nested集合类型的字段进行不等于的检索
    选择MobPush的三大理由
    ubuntu, nvidia driver, cuda, cudnn， pytorch-gpu版本安装
    应用在苹果应用商店该如何进行优化
    基于多云构建监控告警系统
    UI组件DevExpress ASP.NET Core v22.1亮点 - 甘特图、UI组件全新升级
    C到C++入门基础知识
  • 原文地址：https://blog.csdn.net/qq_56989560/article/details/126455634