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

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>淘宝联想词-jsonptitle>
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 += `
  • ${ele[0]}
  • `
    }) list.innerHTML = str; } inp.oninput = function() { jsonp('https://suggest.taobao.com/sug', { q: inp.value }, addList, 'callback') } //比如inp.value='男' 会生成一个script标签

    你可能感兴趣的:(前端,前端,javascript)