Jsonp的原理

前言：

下面是原生jsonp的使用案例。后端使用node搭建的简易服务器。

1.前段代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script></head><body><script>function showInfo123(data) {console.log(data)}</script><script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script><!-- <script>show()</script> --><button id="btn">jsonp</button></body></html><script>$('#btn').click(function(){var frame = document.createElement('script');frame.src = 'http://localhost:3000/getscript?callback=showInfo123';$('body').append(frame);})</script>

2.后端代码 node.js

       // 导入 http 内置模块const http = require('http')// 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query const urlModule = require('url')// 创建一个 http 服务器const server = http.createServer()// 监听 http 服务器的 request 请求server.on('request', function (req, res) {// const url = req.urlconst { pathname: url, query } = urlModule.parse(req.url, true)if (url === '/getscript') {// 拼接一个合法的JS脚本，这里拼接的是一个方法的调用// var scriptStr = 'show()'var data = {name: 'xjj',age: 18,gender: '女孩子'}var scriptStr = `${query.callback}(${JSON.stringify(data)})`// res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行res.end(scriptStr)} else {res.end('404')}})// 指定端口号并启动服务器监听server.listen(3000, function () {console.log('server listen at http://127.0.0.1:3000')})

Jsonp原理：

ajax 请求受同源策略影响，不允许进行跨域请求，我们利用 script 标签的 src 属性不受同源策略的约束，利用这个特性jsonp需要以下步骤：

1、动态创建(document.createElement(‘script’))
2、设置src 属性，(src总要包含参数callback=fn)进行跨域请求

3、将添加到页面中执行（body.appendChild(‘script’)）
4、页面要提前定义好callback，进行页面操作。

备注：
服务端不再返回JSON格式的数据，而是返回回调函数包裹数据（fn({name:‘tom’,age:18}），在src中进行了调用，这样实现了跨域。

CORS设置跨域请求

后端的跨域，在node的设置

 //设置允许跨域的域名，*代表允许任意域名跨域  CORS跨域res.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:3003");

vue-cli如何设置代理跨域

1.在根目录中新建一个vue.config.js文件

module.exports={devServer: {proxy:{'/api':{target:'http://127.0.0.1:3002/',//跨域请求资源地址ws:false,//是否启用websocketschangeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{'^/api':''//注册全局路径}}}}
}

2、在组件中调用接口

fn(){this.$axios.get('/api/api/v1/home').then(res=>{console.log(res.data);})}

注意：

不管哪种方式解决跨域，最后一定要重新启动项目，也就是小黑框，然后才能运行。

Jsonp、CORS、vue设置代理跨域相关推荐

vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...
vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题
这两天在琢磨用sanic配合vue来写一个网站,果然马上就遇到问题了... Response to preflight request doesn't pass access control chec ...
Vue.js跨域请求配置、Node.js设置允许跨域
Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码: // 跨域处理proxyTable: {'/api': { // 匹配所有以 '/api' ...
vue脚手架解决跨域问题-------配置反向代理
vue脚手架解决跨域问题-------配置反向代理参考文章: (1)vue脚手架解决跨域问题-------配置反向代理 (2)https://www.cnblogs.com/zbx-boke/p/9 ...
解决Vue前后端跨域问题的多种方式
1 前言本文主要介绍借助解决Vue前后端跨域问题的几种方式说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
SpringBoot2.1.5 (22)--- SpringBoot设置支持跨域请求
SpringBoot2.1.5 (22)--- SpringBoot设置支持跨域请求现代浏览器处于安全的考虑,在http/https请求时必须遵守同源策略,否则即使跨域的http/https 请求, ...
Vue之Axios跨域问题解决方案
背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据 axios中文网址:https://www.kancloud.cn/yunye/axios/ ...
Node跨域cors模块,nodejs+express跨域
Node跨域cors模块 NodeJS+Express跨域什么是CORS CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器 ...

Jsonp、CORS、vue设置代理跨域