jquery跨域请求（jquery跨域问题）

科技前沿 • 2025-04-14 12:09 • 阅读 37

大家好，我是讯享网，很高兴认识大家。

 <div id="navCategory"></div>

AJAX其实就是异步的js和xml

通过ajax可以在浏览器中发送异步请求。

最大优势：无刷新获取数据

优点：

1.可以无需刷新页面与服务器进行通信

2.允许根据用户事件更新部分页面内容

当然也存在其缺点问题：比如跨域问题等！

由于get和post请求类似，原生代码相比jQuery复杂一些：原生代码演示get请求 jquery演示get和post请求

代码中会出现node.js的相关代码，比如express框架，对node.js不熟悉的同学可以先注重前端代码

前端代码：

服务端代码

先了解一下jQuery中AJAXGET请求和POST请求语法：

get 请求
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text，_default。

post 请求
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text,

服务端代码：

这里使用app.all()使得所有请求方法都可以访问

跨域问题：当我们的浏览器从一个域名的网页去请求另一个域名的资源时，其中域名、端口、协议任一不同，都是属于跨域

示范例子

前端请求代码如下：

服务端我介绍两种简单且效率极高的方法解决跨域问题

1.在服务端设置header

2.使用中间件cors

这里给大家具体讲一下cors中间件使用步骤

1.在终端使用 npm i cors 命令下载这个中间件

2.使用require导入cors中间件：const cors=require(“cors”)

3.用app.use()方法注册中间件：app.use(cors()) 注意：这个注册方法一定要写在在配置路由之前

一.JSONP跨域

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，只支持get请求(具有局限性)

工作原理：JSONP 就是利用 script 标签的跨域能力来发送请求的。

二.nginx反向代理

大致解释：

www.A.com/index.html需要调用www.B.com/server.js，可以写一个中间接口www.A.com/server.js，靠着这个接口在服务端

去调用www.B.com/server.js并拿到返回值，然后再返回给index.html

这个方法一般很少使用，它可以不用目标服务器与前端配合，但是需要搭建一个中转nginx服务器，用于转发请求。

到此这篇关于AJAX请求与跨域问题解决方法详解的文章就介绍到这了,更多相关AJAX请求与跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！