跨越解决方案.

LongLongWayToGo
321 阅读2分钟

方案一.JSONP

JSON with Padding , 是一种借助与 script 标签发送 跨越请求 的技巧.它本质并不是ajax请求,所有没有跨域问题.

跨越问题指的是不同源的ajax请求.

不同源是指只要服务器与客户端的协议,域名,端口号有一个不相同就是不同源的.

jsonp的解决方案是前端使用jquery,后端使用node.js 和 express.

它的原理是这样的:

image.png

通过script标签的src属性发送ajax请求.请求得到的数据会写入script标签中.如上图中我们设置服务器返回一个"console.log('abc')"的字符串.当打开页面的时候就会发送ajax请求,响应回数据后就会立即执行.

具体实现步骤

1.后端的代码如下


const app = express();

app.get('/get', (req, res) => {
  const data =  JSON.stringify({a:1,b:2})
  const fnStr = `fn(${data})`
  res.end(fnStr); // 返回字符串，内容是：函数调用语句
})

app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});

2.前端代码如下:

    function fn(rs) {
        console.log(rs);
    }
</script>
<html>
    <script src="http://localhost:3000/get"></script>
</html>

具体的原理:

image.png 当前端通过script标签的src属性发送请求后,服务器返回一个函数调用表达式,将要发送给前端的数据放在参数中传递.前端提前定义一个函数 这个函数要和后端返回的函数调用表达式一致 那么这个时候前端定义的函数的形参就是后端发给我们的数据

工作中常用的方式 jquery中的ajax已经封装好了的jsonp方式，可以直接使用。

具体来说就是给ajax请求添加一个dataType属性，其值为"jsonp"。

示例如下：

前端页面：加上dataType属性

$.ajax({
   type: 'GET',
   url: 'http://localhost:4000/get', 
   success: function (result) {
      console.log(result);
   },
   dataType: 'jsonp' // 必须要指定dataType为jsonp
});

后端接口:

express框架已经提供了一个名为jsonp的方法来处理jsonp请求:

const express = require('express');
const app = express();
app.get('/get', (req, res) => {
  let data = {a:1,b:2}
  res.jsonp(data)  
})
app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});

方案二. CORS

前端不用做任何改变,后端使用CORS包即可

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。

跨越错误说明: image.png 我们可以直接设置一个响应头:

app.get('/get', (req, res) => {
  // * 表示允许任何域名来访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定源访问
  // res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
  res.send(Date.now().toString())
})

这种方案无需客户端作出任何变化（客户端不用改代码），就当跨域问题不存在一样。 服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头

步骤: 下载一个cors的包, 把它当做express中的中间件，注意代码应该放在顶部 后端代码

const express=require('express')
var cors = require('cors')
app.use(cors())
avatar
文章
阅读
粉丝