ToB企服应用市场:ToB评测及商务社交产业平台

标题: 跨域的几种实现方式 [打印本页]
作者: 忿忿的泥巴坨    时间: 2022-8-9 14:40
标题: 跨域的几种实现方式
首先，跨域就是浏览器为了保护你的安全，禁止一个网站向和它不同域名的网站发送ajax请求。比如如果浏览器当前处于http://localhost:3001网站下，那么它无法发送请求到http://localhost:3002。
下面我们在localhost:3001访问3002中的api。

JSONP实现跨域

JSONP是一个比较投机的方式，它利用的是浏览器对script标签的跨域没有限制这一特性来实现发送请求。
  1. <html>
  2. <head>
  3.    
  4. </head>
  6. <body>
  7.    
  8.    
  9.    
  10. </body>
  12. </html>
复制代码
而API也不能返回单纯的json了，因为json是纯数据，script标签加载之后并不会产生任何动作。API应该返回包装了回调函数调用的数据，这个函数的参数就是实际JSON数据。如下：
  1. handleResult({
  2.         "name": "app2"
  3. })
复制代码
这样，当浏览器加载了localhost:3002/controller，它会把响应数据当作js脚本来处理，然后就是调用回调函数handleResult，并把实际的响应传回去。下面是调用成功的一个例子：

然而，这用到一个api就要一个script标签，这让人无法忍受，Jquery封装了jsonp的调用：
  1. <html>
  3. <head>
  4.    
  5. </head>
  7. <body>
  8.    
  9. </body>
  11. </html>
复制代码
这里的jsonp代表请求中参数的名字，jsonCallback代表回调函数的名字，这会在url中组合成localhost:3002?${jsonp}=${jsonpCallback}的形式
Jsonp实现跨域的一个缺点就是，它无法发布post请求，只能发布get请求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4