js：json请求和jsonp请求

请求方式	同源检查	解决方式
json	是	服务端支持
jsonp	否	不需要服务端支持

一、使用json请求

1.1 未开启跨域

安装依赖

$ pnpm i express

服务端代码

// server.js
const express = require("express");const app = express();// 返回json数据
app.get("/api/json", (request, response) => {response.json({ msg: "ok" });
});const port = process.env.PORT || 5000;app.listen(port, () => {console.log(`Server runing on http://127.0.0.1:${port}`);
});

启动服务端

$ node server.js
Server runing on http://127.0.0.1:5000

客户端依赖

$ pnpm i http-server# 启动静态服务器
$ npx http-server -p 5500 -c-1

此时，后端服务器运行在5000 端口，前端静态服务器在运行在5500 端口

出现了跨域问题

前端访问地址：http://127.0.0.1:5500/index.html接口地址：http://127.0.0.1:5000/api/json

发送json 请求

// script.js
fetch("http://127.0.0.1:5000/api/json").then(function (response) {return response.json();}).then(function (data) {console.log(data);});

直接显示跨域错误

Access to fetch at 'http://127.0.0.1:5000/api/json'
from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

1.2 开启跨域

安装依赖

$ pnpm i cors

服务端代码

// server.js
const express = require("express");
var cors = require('cors')const app = express();// 开启跨域
app.use(cors())// 返回json数据
app.get("/api/json", (request, response) => {response.json({ msg: "ok" });
});const port = process.env.PORT || 5000;app.listen(port, () => {console.log(`Server runing on http://127.0.0.1:${port}`);
});

重启服务后，前端可以正常获取接口数据

二、使用jsonp

服务端代码

// server.js
const express = require("express");
// var cors = require('cors')const app = express();// 开启跨域
// app.use(cors())// 返回json数据
app.get("/api/json", (request, response) => {response.json({ msg: "ok" });
});// 返回jsonp数据
app.get("/api/jsonp", (request, response) => {response.jsonp({ msg: "ok" });});const port = process.env.PORT || 5000;app.listen(port, () => {console.log(`Server runing on http://127.0.0.1:${port}`);
});

前端代码

// 动态导入script
function importScript(src) {var hm = document.createElement("script");hm.src = src;var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);
}// 全局的响应处理函数
function handleResponse(res) {console.log(res);
}(function () {sendJsonpBtn.addEventListener("click", function () {importScript("http://127.0.0.1:5000/api/jsonp?callback=handleResponse");// jsonp的响应// /**/ typeof handleResponse === 'function' && handleResponse({"msg":"ok"});});
})();

不需要开启跨域就可以直接获取到数据了

参考
一分钟说完JSONP请求，面试满分答案ヾ(≧▽≦*)o

js：json请求和jsonp请求相关推荐

js get请求和post请求
浅浅记录一下吧~~~ httpGet(url, callback) {let xhr = new XMLHttpRequest();xhr.onreadystatechange = function ...
mvc ajax get请求,springMVC 中 ajax get 请求和 post 请求的坑以及参数传递
1, ajax 请求无论为 post ,或者 get ,url中带有?形式的参数,后台都能以String类型变量接收,变量名称和参数名称必须一致前台ajax: $.ajax( "prod ...
接口定义，常见的接口，常见的接口请求方式，put请求和patch请求的区别
接口定义:应用程序编程接口,指前后端数据交互的一套标准,包括软件内部之间的接口,硬件之间的接口或者是软件对外的接口. 常见的接口类型: 1,Webservice接口,主要用于服务端的接 ...
iOS开发网络篇—GET请求和POST请求
一.GET请求和POST请求简单说明创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http ...
WEB中get请求和post请求的区别
参考:https://blog.csdn.net/weixin_39361808/article/details/81136865 GET请求和POST请求是HTTP协议发送请求的两种基本方法. W3 ...
axios中出现两次请求，OPTIONS请求和GET请求
在项目中发现ajax中出现两次请求,OPTIONS请求和GET请求查看到浏览器NetWork有两次请求,请求url一样: 查找原因是浏览器对简单跨域请求和复杂跨域请求的处理区别. XMLHttpRe ...
JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
java中的post的作用,JSP、Servlet中get请求和post请求的区别总结
在学习JavaWeb最初的开始阶段,大家都会遇到HttpServlet中的doGet和doPost方法.前两天看<Head First Servlets & JSP>看到其中讲关于 ...
客户端（前端）Ajax中Get请求和Post请求的区别
我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,Get请求和Post请求的区别到底在哪呢? GET请求 get是最常见的请 ...

js：json请求和jsonp请求

目录

一、使用json请求

1.1 未开启跨域

1.2 开启跨域

二、使用jsonp

js：json请求和jsonp请求相关推荐

最新文章

热门文章