JSONP实现跨域请求，cors解决跨域以及nginx反向代理实现跨域

给贝贝赚口粮

已于 2022-10-19 18:30:53 修改

阅读量943

点赞数

分类专栏：前端文章标签：前端 javascript

于 2022-10-19 18:16:03 首次发布

本文链接：https://blog.csdn.net/weixin_42178670/article/details/127411713

版权

前端专栏收录该内容

93 篇文章 0 订阅

订阅专栏

JSONP实现跨域请求

步骤：
1、前端拼接一个script标签，在请求的url中传入一个需要执行的函数方法名，触发对指定地址的get请求
2、后端对这个请求进行处理，并返回"callbackFn(‘res value’)"的字符串
3、前端script加载完成后就是在script中执行callbackFn(‘res value’)

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝联想词-jsonp</title>
</head>
<body>
	<div class="warpper">
		<label for="inp">搜索关键字：</label>
		<input type="text" class="inp" id="inp">
		<ul class="list"></ul>
	</div>

	<script>
		/**
			url: string
			params: obj
			cb: function
			cbN: string
		**/
		function jsonp(url, params, cb, cbN) {
			// 兼容处理
			let queryString = url.indexOf('?') === -1 ? '?' : '&';
			// 拼接参数
			for(let k in params) {
				if(params.hasOwnProperty(k)) {
					queryString += `${k}=${params[k]}&`;
				}
			}
			// 产生回调函数名字
			const cbName = 'jsonp' + Math.random().toString().replace('.', '');
			// 生成script标签
			const oScript = document.createElement('script');
			// 请求资源
			oScript.src = `${url}${queryString}${cbN}=${cbName}`;
			// 全局注册回调函数
			window[cbName] = function() {
				// 调用回调
				cb(...arguments);
				// 从body中删除
				document.body.removeChild(oScript)
			}
			// 插入到body里
			document.body.appendChild(oScript);
		}

		// 测试上述JSONP跨域函数
		const inp = document.getElementsByClassName('inp')[0];
		function addList(data) {
			const list = document.getElementsByClassName('list')[0];
			let str = '';
			data.result.forEach(ele => {
				str += `<li>${ele[0]}</li>`
			})
			list.innerHTML = str;
		}
		inp.oninput = function() {
			jsonp('https://suggest.taobao.com/sug', {
				q: inp.value
			}, addList, 'callback')
		}
		//比如inp.value='男' 会生成一个script标签<script src="https://suggest.taobao.com/sug?q=男&callback=jsonpxxxxxxxxx"></script>  callback后的函数名是上面随机生成的
	</script>
</body>
</html>

上述示例抄的这位大佬，先谢过

vue中使用JSONP实现跨域

使用vue-Jsonp插件实现jsonp跨域
npm安装：

npm install vue-Jsonp --save

引入：

import {VueJsonp} from 'vue-Jsonp'
Vue.use(VueJsonp)

具体使用

this.axios.jsonp("https://suggest.taobao.com/sug",
      {
        params: {//请求参数
          q:'男'
       },
       jsonp:'callback', //回调参数key，与后端保持一致，如后端要求为cb，那就写jsonp:'cb',不定义此参数则默认为callback
       jsonpCallback:"addList"	//回调函数value，不定义此参数则默认随机生成
      }).then(function(res){
        console.log("获取数据:",res)   
      },
      function(){
        console.log("无法获取！")
      }
  )
// 最后请求src为https://suggest.taobao.com/sug?q=男&<jsonp>=<jsonpCallback>

优缺点

优点：（优缺点参考这位大佬，先谢过）
1、不受同源策略的限制，可以跨过同源策略
2、兼容性好，在更加古老的浏览器中可以使用，不需要XMLHttpRequest或ActiveX的支持
3、请求完成后通过callback返回结果，回调函数的权限给了调用方，相当于controller层和view层分开
缺点：
1、仅支持get请求，不支持其他请求
2、只支持跨域http请求，不能解决不同域的两个页面如何进行JavaScript调用的问题
3、调用失败不会返回状态码
4、安全性不够

CORS实现跨域

此操作不需要前端做任何操作，后端使用cors解决跨域，设置接受的origin即可解决跨域

nginx反向代理

比如说请求url是 ‘/api’
则在nginx里配置

location /api {
	proxy_pass http://xxx.com;  # http://xxx.com是所需要转发到的资源地址
	add_header Access-Control-Allow-Origin *;  # 设置接受的请求源为任意，也可以指定特定请求源
}

重启nginx即可

给贝贝赚口粮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP实现跨域请求，cors解决跨域以及nginx反向代理实现跨域

jsonp如何实现跨域以及vue如何实现jsonp跨域；cors跨域，nginx跨域
复制链接

扫一扫

专栏目录