## 解决跨域的方式

最新推荐文章于 2024-07-05 23:03:41 发布

七里-c

最新推荐文章于 2024-07-05 23:03:41 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/weixin_45953930/article/details/108812526

版权

JSONP 处理跨域

JSONP 处理跨域的原理

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

优点：

使用简便，没有兼容性问题。

缺点：

只支持 GET 请求。
前后端需要配合。
由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。

示例代码

后端 express

const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.jsonp({
        code: 0,
    msg: 'OK'
    })
})

app.listen(3000)

前端

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>jsonp</h1>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  <script>
    $(function () {
      $.ajax({
        url: 'http://localhost:3000',
        type: 'GET',
        dataType: 'jsonp',
        success: function (res) {
          console.log(res)
        }
      })
    })
  </script>
</body>

</html>

2.CORS （跨域资源共享）处理跨域

优点：

CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护。
支持所有类型的 HTTP 请求。

缺点：

存在兼容性问题，特别是 IE10 以下的浏览器。
第一次发送非简单请求时会多一次请求。

示例代码

后端 express

const express = require('express')
const app = express()

app.use((req, res, next) => {
  // 设置响应头
  res.set({
    // 控制允许的请求来源
    'Access-Control-Allow-Origin': '*',
    // 控制允许的自定义请求头
    'Access-Control-Allow-Headers': 'abc,efg',
    // 控制允许的请求方式
    'Access-Control-Allow-Methods': 'GET,POST,PUT,PATCH,DELETE'
  })
  
  next()
})

app.get('/', (req, res) => {
    res.json({
        code: 0,
    msg: 'OK'
    })
})

app.listen(3000)

前端

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>cors</h1>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  <script>
    $(function () {
      $.ajax({
        url: 'http://localhost:3000',
        type: 'GET',
        success: function (res) {
          console.log(res)
        }
      })
    })
  </script>
</body>
</html>