跨域问题常用的三种解决方式

article/2025/9/20 1:59:46

一、什么是跨域?跨域是如何产生的?

  • 同源策略:

浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；

  • 同源:

协议 http||https、域名和 port端口 都相同则同源，只要有一项不同就是不同源

  • 跨域:

不同源就跨域

跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

文件资源-不受同源限制

通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的

二、如何解决跨域?

1.JSONP

注意:

JSONP和json没有任何关系

JSONP需要前后台配合

1.1实现原理:（另辟蹊径、瞒天过海）

**走获取文件资源script这个方式**JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

1.2 URL设置给 script 标签

  • 如果直接使用ajax的形式，提醒跨域报错；
  // 1.XHR这条路：// URL ： http://www.liulongbin.top:3006/api/jsonp// XHR形式请求URL：被同源策略限制，不符合，浏览器报错！// $.ajax({//   url: "http://www.liulongbin.top:3006/api/jsonp"// });
  • 走文件资源的形式
<script type="text/javascript">// 2.文件资源// JSONP：获取文件资源，压根不受同源策略限制；//        URL设置给 script 标签function fn (data) {console.log(data)}
</script><!-- 前端拿到是个什么？JS文件，JS代码（变量、函数） -->
<!-- 后台要求：获取文件资源的时候，告诉后台前面函数名叫啥callback=fn -->
<!-- 后台返回：约定好：文件内容：函数执行(); -->
<!--          给大家把前端需要数据，作为函数实参传入，无形中可以拿到数据！ --><!-- 疑问：直接把JS文件里面直接写成数据！实现方案为什么不直接返回数据？反而返回是一个JS代码 函数执行(数据) -->
<script type="text/javascript" src="http://www.liulongbin.top:3006/api/jsonp?callback=fn">// 上述URL返回的内容： hello({"message":"JSONP请求测试成功","data":{}}) 
</script>
  • 改进 ↓
<script type="text/javascript">function nihao (data) {console.log(data)}// 1.动态创建一个script标签var script = document.createElement('script');// 2.修改src属性script.src = 'http://www.liulongbin.top:3006/api/jsonp?callback=nihao&uname=lisi&age=12';// 3.把动态创建的script标签追加到head标签里面,发出请求；var head = document.getElementsByTagName('head')[0]head.appendChild(script);
</script>

1.2 jQuery封装JSONP

  • $.ajax() 该方法可以发送jsonp请求，但是jsonp请求本质上不是Ajax;

  • 和jsonp相关的两个属性 script.src = ‘xx地址?callback=nihao&uname=lisi&age=12’;

  • jsonp 属性的值为了迎合后端（后端根据该名称获取回调函数的名字）；jsonp的值决定了等号左侧的那个名字

  • jsonpCallback 决定等号右侧的内容(服务端返回的函数调用的名称)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><button>点击通过JSONP方式获取数据（JQ）</button>
</body>
<script src="./jquery.js"></script>
<script type="text/javascript">let fn = function(data) {console.log(data);};// 现在带着大家用$.ajax方式实现JSONP$("button").click(function() {// 好处：JQ开发来说：友好；写法统一！//     不加ataType: 'jsonp'：背后实现使用XHR//     加上：造script标签，设置src，添加到页面head结构；$.ajax({// ********************************基本写法够了// 内部实现过程就是上节优化写；不是XHR，造script标签；dataType: 'jsonp',url: "http://www.liulongbin.top:3006/api/jsonp",success: function(res) {console.log(res);},// ********************************灵活配置// 指定后面值：后台约定参数名// jsonp: 'callback',// 指定值：前端指定执行函数的名称// jsonpCallback: "fn"});// 细节：使用$.ajax无需关注函数名叫什么，自定内部会给函数起名字；//       默认参数名就是callback;（一般情况下所有后台默认使用callback）//       如果后台要求使用使用cb   配置jsonp: 'cb',// $.ajax// *******XHR:FormData POST  // processData: false,// contentType: false,// *******JSONP：文件资源// dataType: 'jsonp',// jsonp:"后台要求参数名",// jsonpCallback:"参数值"});
</script></html>
  • 特点：
  • script标签发出请求本身就是get，不支持别的请求方式

  • get请求传递的数据量有限制（URL地址的长度不超过8000个字符）

2. CORS（跨域资源共享）

浏览器同源政策及其规避方法

跨域资源共享 CORS 详解

  • 一般都是后台设置
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
  • 在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置（相当于将客户端添加到服务器可访问的白名单）。
//拦截所有请求  3000端口服务器
server.use((req, res, next) => {// Access-Control-Allow-Origin 允许哪些客户端访问我// * 代表允许所有的客户端访问我server.header('Access-Control-Allow-Origin', '*');// Access-Control-Allow-Methods 允许客户端使用哪些请求方法访问我server.header('Access-Control-Allow-Methods', 'get,post');next(); // 将控制权传递给下一中间件
});
  • 在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息，如需要连cookie信息一起传递到另一服务器则需要在客户端和服务器端进行以下配置：
// 客户端
// 对ajax对象进行设置 当发送跨域请求时，携带cookie信息
xhr.withCredentials = true;

// 服务器端   3000端口服务器
// 在响应头中进行设置 允许客户端发送跨域请求时携带cookie信息
res.header('Access-Control-Allow-Credentials', true);

3.代理服务器 (这里讲述的是在vue中实现)

首先我们先来认识一下vue项目中的环境变量

  • 认识环境变量-端口配置
问题：前端项目启动时，占用端口号9528，是在哪里定义的呢？答：在vue.config.js中配置的。下边我们来学习一下它的用法，从而了解环境变量的使用。

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址： 地址

下图是开发环境服务端口的在vue.config.js中 位置
在这里插入图片描述
我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量

  • 环境变量的配置文件
    在一些特殊的配置文件中定义环境变量
文件名称对应环境说明
.env.development开发环境当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.production生产环境当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.staging模拟生产环境可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)
  • 在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。
    在这里插入图片描述
  • 定义环境变量-示例

key = value key表示环境变量的名称 value表示环境变量的值

    # just a flagENV = 'development'# base apiVUE_APP_BASE_API = '/dev-api'

请注意，以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，建议以它开头来定义

    VUE_APP_NUM = 2000
  • 使用环境变量

定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可

    process.env.环境变量名

注意：修改服务的配置文件，想要生效的话，必须要重新启动服务

更多阅读：vue-cli 环境与变量

  • 小结
1. 不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量  开发环境  - >  development的文件      生产上线  -> production的文件  
2. key = value    定义环境变量     process.env.环境变量名字
3. 自定义的环境变量要以：VUE_APP_开头

实现代理服务器

代理转发（只有浏览器会出现跨域问题，服务器与服务器之间不会出现跨域问题）
在ajax的基地在baseUrl的参数必须是相等地址，不能是绝对地址

Vue-Cli配置代理转发

在这里插入图片描述

思路：

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：1. 中间服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
2. 中间服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明

在vue.config.js配置文件中，有一项是devServer，它就是我们下边要操作的主角。

    module.exports = {devServer: {// ... 省略// 代理配置proxy: {// 如果请求地址以/api打头,就出触发代理机制// http://localhost:9588/api/login -> http://localhost:3000/api/login'/api': {//这里用了本机的服务器,所以写localhost,如果用了其他服务器把localhost换掉就好//比如:http://192.168.156.50:3000target: 'http://localhost:3000' // 我们要代理的真实接口地址}}}}}

基地址

.env.development

    VUE_APP_BASE_API = '/api'

api/user.js

    export function login(formData) {return request({/   url: 'api/sys/login',+   url: '/sys/login', // 前面的api就省略了method: 'POST',data: formData})}

小结

  1. vue-cli集成了跨域代理功能-- 只能用在开发阶段。
  2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

特别强调：

ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

http://chatgpt.dhexx.cn/article/rTDSbY3Z.shtml

相关文章

完全二叉树的节点数

完全二叉树的节点数

目录 Leecode.222完全二叉树的节点数思路分析层序遍历_迭代递归_二叉树的遍历迭代_二叉树的遍历 Leecode.222完全二叉树的节点数 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底…
阅读更多...
完全二叉树的节点个数

完全二叉树的节点个数

给你一棵完全二叉树的根节点root&#xff0c;求出该树的节点个数。 完全二叉树的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没有填满之外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干位置。若最底…
阅读更多...
对二叉树、节点、度之间关系的思考（附图）

对二叉树、节点、度之间关系的思考（附图）

二叉树 节点 二叉树中每个元素都称为节点。 度 度的定义&#xff1a;节点所拥有的子树的数目称为该节点的度注意&#xff1a; 叶子节点的度为0 二叉树的度表示节点的子树或直接继承者的数目&#xff0c;二叉树的度是一个子树或单子树。2度是两个孩子&#xff0c;或者左和右…
阅读更多...
【二叉树】二叉树中第二小的节点

【二叉树】二叉树中第二小的节点

0x00 题目 给定一个非空特殊的二叉树&#xff0c;每个节点都是 正数 并且每个节点的子节点数量只能为 2 或 0 如果一个节点有两个子节点的话 那么该节点的值等于两个子节点中 较小 的一个 更正式地说&#xff0c; root.val min(root.left.val, root.right.val) 总成立 给出…
阅读更多...
求二叉树节点的路径

求二叉树节点的路径

题目&#xff1a;求二叉树节点的路径 【问题描述】 建立一棵二叉树&#xff0c;编程实现求从根结点到给定结点之间的路径。 【基本要求】 建立一棵以二叉链表形式存储二叉树&#xff0c;以bt指向根结点&#xff0c;p指向任一给定的结点&#xff0c;编程实现“以字符形式输出…
阅读更多...
二叉树（根节点到任意结点的路径）

二叉树（根节点到任意结点的路径）

假设二叉树采用二叉链表方式存储&#xff0c; root指向根结点&#xff0c;node 指向二叉树中的一个结点&#xff0c;编写函数 path&#xff0c;计算root到 node 之间的路径&#xff0c;&#xff08;该路径包括root结点和 node 结点&#xff09;。path 函数声明如下&#xff1a;…
阅读更多...
计算机二叉树节点计算公式,二叉树节点数该怎么计算？有几种算法？

计算机二叉树节点计算公式,二叉树节点数该怎么计算？有几种算法？

每一棵二叉树中都有左右两棵子树&#xff0c;子树中又有无数节点&#xff0c;那你们知道子树中的节点该怎么计算吗?快来跟小编了解一下吧。 二叉树算法概念 对于任何一棵二叉树来说&#xff0c;其叶子结点的数目为n0&#xff0c;且其度数为2的结点数n2&#xff0c;则n0n21. 证…
阅读更多...
任意二叉树节点数、度数与叶子数的关系

任意二叉树节点数、度数与叶子数的关系

二叉树的性质——节点数、度数、叶子节点数的关系 对于任意一棵二叉树&#xff0c;如果2度的节点数有n2个&#xff0c;则叶子数n0必定为n21(n0n21) (1) 我们假设有二叉树的枝有B个&#xff0c;如果从下往上思考&#xff0c;可以看做是每个节点都有一个枝与之对应&#xff0c…
阅读更多...
二叉树的节点及树的创建

二叉树的节点及树的创建

二叉树的基本概念 二叉树是每个节点最多有两个子树的树结构。通常子树被称作“左子树”&#xff08;left subtree&#xff09;和“右子树”&#xff08;right subtree&#xff09;。 二叉树的性质&#xff08;特性&#xff09; 性质1&#xff1a;在二叉树的第i层上至多有 2&am…
阅读更多...
二叉树的节点个数以及高度详解（附图解）

二叉树的节点个数以及高度详解（附图解）

二叉树的节点个数以及高度 文章目录 二叉树的节点个数以及高度前言NO.1 定义链式二叉树NO.2 创建二叉树一、二叉树节点个数1.代码展示2.递归图解 二、二叉树叶子节点个数1.代码展示2.递归图解 三、二叉树第k层节点个数1.代码展示2.递归图解 四、二叉树高度和深度1.代码展示2.递…
阅读更多...
二叉树根节点到指定节点的路径

二叉树根节点到指定节点的路径

题目描述&#xff1a;给定一棵二叉树和二叉树中一个节点&#xff0c;输出根节点到指定节点间的路径。 10 　　　　/ \ 　　　　5 12 　　　 / \ 　　 4 7 指定节点7&#xff0c;那么输出路径应该是10-5-7。 分析与解法&#xff1a; 这个题目是在我做…
阅读更多...
求二叉树根节点到指定节点的路径

求二叉树根节点到指定节点的路径

算法 求二叉树根节点到指定节点的路径 author:Jingdai date:2020.11.05 题目描述 给你一个棵二叉树&#xff0c;再给你一个指定的节点&#xff0c;求根节点到指定节点的路径。 如图&#xff0c;比如让你求到 4 节点的路径&#xff0c;则应该返回的路径为 [0, 1, 4] 。 思路 …
阅读更多...
二叉树节点和度的关系及特点

二叉树节点和度的关系及特点

写在前边的话&#xff1a;你的支持是我写作的动力&#xff0c;有帮助到你的话麻烦点赞加收藏呦。感激不尽&#xff01;如有错误也请留言指正 目录 一、完全二叉树 节点总数的特点 二、二叉树 度的特点 1.n0与n2的关系 2.节点总数和度的关系 三、例题 例题一 例题二 例题三 一…
阅读更多...
二叉树的节点

二叉树的节点

1、前序&#xff1a;根结点第一个访问&#xff0c;然后访问左、右孩子&#xff1b; 后序&#xff1a;根结点最后访问&#xff0c;开始先访问左、右孩子&#xff1b; 中序&#xff1a;根结点第二个访问&#xff0c;最先访问左孩子&#xff0c;最后访问右孩子 前序序列&#x…
阅读更多...
求二叉树的节点个数

求二叉树的节点个数

如果是空树&#xff0c;则结点个数为0&#xff0c;递归结束 否则结点个数为左子树的结点个数右子树的结点个数1 【算法描述】 int NodeCount(BiTree T) {if (T NULL)return 0; // 如果是空树&#xff0c;则结点个数为0&#xff0c;递归结束elsereturn NodeCount(T->lchild…
阅读更多...
数据结构-第五章 二叉树

数据结构-第五章 二叉树

一、树 1.树的概念 树是一种非线性的数据结构&#xff0c;是由n个结点组成的一个集合。每一棵树都可以被分解为根节点和n棵子树构成(n>0) 根节点(Root)&#xff1a;没有父结点的结点称为根节点&#xff0c;如A 父结点&#xff1a;含有子结点的结点&#xff0c;如A是B的父…
阅读更多...
零基础学二叉树

零基础学二叉树

目录 二叉树的定义&#xff1a; 二叉树的应用&#xff1a; 认识二叉树&#xff1a; 二叉树的基本形式&#xff1a; 二叉树的节点&#xff1a; 二叉树的高度和深度&#xff1a; 二叉树的子树&#xff1a; 二叉树的度&#xff1a; 满二叉树&#xff1a; 完全二叉树&…
阅读更多...
npm 升级

npm 升级

npm 版本升级 mac版本 npm install -g npm1.网上有看到别的同学碰到升级报错的情况&#xff1a;可以试试用管理员身份安装&#xff1a; sudo npm install -g npm windows版本 npm install -g npm2.安装完成之后&#xff0c;输入npm -v检查是否升级成功&#xff0c;我是从6.…
阅读更多...
npm升级到最新版本

npm升级到最新版本

阅读更多...
npm 升级依赖包

npm 升级依赖包

首先安装升级插件 npm-check-updates $ npm install -g npm-check-updates # 或者 $ cnpm install -g npm-check-updates ncu 是 npm-check-updates 的缩写命令 输入ncu命令&#xff0c;可以看到需要升级安装包 # 查看更新ncu 可以看到有好几个包要更新 # 查看所有ncu命令…
阅读更多...
推荐文章

Copyright @ 2022~2023