跨域

最新推荐文章于 2024-12-04 19:55:26 发布

喝啤酒的猫

最新推荐文章于 2024-12-04 19:55:26 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.csdn.net/qq_38763173/article/details/105972821

react 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JSONP的工作原理及其在跨域通信中的应用，同时介绍了如何使用jQuery和Node.js实现JSONP请求，以及如何配置Vue和React项目中的跨域代理。此外，还对比了JSONP与CORS两种跨域技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

封装jsonp

// index.html
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'Iloveyou' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

上面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=show这个地址请求数据，然后后台返回show('我不爱你')，最后会运行show()这个函数，打印出’我不爱你’

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('我不爱你')`)
})
app.listen(3000)

jQuery的jsonp形式

$.ajax({
url:"http://crossdomain.com/jsonServerResponse",
dataType:"jsonp",
type:"get",//可以省略
jsonpCallback:"show",//->自定义传递给服务器的函数名，而不是使用jQuery自动生成的，可省略
jsonp:"callback",//->把传递函数名的那个形参callback，可省略
success:function (data){
console.log(data);}
});

Nodejs中间件代理跨域

vue

利用webpack-dev-server作为代理服务器对请求进行代理转发

webpack-dev-server内部利用http-proxy-middle包对特定请求进行转发操作

//vue.config.js

module.exports = {
 ... ...
 devServer: {
	proxy: {
	  	// '/api': 'http://localhost:4000'
		// http://localhost:4000/api/search/users   
	  '/api': {  // 只对请求路由以/api开头的请求进行代理转发
	    target: 'http://localhost:4000', // 转发的目标地址
	    pathRewrite: {
	      '^/api' : ''  // 转发请求时去除路径前面的/api
	    },
	    changeOrigin: true, // 支持跨域, 如果协议/主机也不相同, 必须加上
	  },
	
	  '/gh': {
	    target: 'https://api.github.com', // 转发的目标地址
	    pathRewrite: {
	      '^/gh' : ''  // 转发请求时去除路径前面的/api
	    }
	  },
	}
  },
}

react

参考 :
react脚手架配置代理与路径别名

CORS

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

参考文章 :

前端常见跨域解决方案（全）

九种跨域方式实现原理（完整版）