一文搞懂跨域问题

Posted 2022-11-20 工程师-小白

一文搞懂跨域问题

• 同源策略
• 跨域
• • 解决跨域办法

同源策略

是浏览器的一个安全策略，保证浏览器的安全运行，要求网页中的协议名，域名和端口号要完全一致，

跨域

违背了同源策略就会产生跨域，比如说在百度的后端中写了一个请求jingdong.com的代码，就会产生跨域问题，

解决跨域办法

1. jsonp 在前端的代码中，首先建立一个回调函数，这个回调函数的入口参数就是需要请求的数据，然后再script标签中加入src属性，src的API中拼接这个回调函数，然后发送给服务端，服务端拿到这个回调函数，执行这个回调函数并且把这个回调函数需要的参数放到回调的参数中，最后服务端将该回调函数返回给浏览器。这种方法需要前后端的配合

• 前端代码

//前端代码 
<script>
    function callback(data)
        console.log(data)
    
</script>
<script src="http://localhost:3000?callback=callback"></script>

• 后端代码

//后端代码基于Node
const express = require('express')

const app = express()

app.get('/', (req,res) => 

    let callback = req.query.callback

    res.send(`$callback($JSON.stringify(
        success:0,
        data:
            name:"yuefengsu"
        
    ))`)

)

app.listen(3000, () =>  console.log('开启了') )

2. 跨域资源共享（CORS）

在请求头中，增加一个Origin字段，这个字段用来说明，本次请求来自那个源（协议+域名+端口），服务器会根据这个值，来决定是否同意这次请求。

这时后台服务器需要增加一个这样的字段CORS请求设置的响应头字段，都以 Access-Control-开头:

1）Access-Control-Allow-Origin：必选
 它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
2）Access-Control-Allow-Credentials：可选
 它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
3）Access-Control-Expose-Headers：可选
 CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

// app.js中添加
app.use((req, res, next) => 
  res.setHeader('Access-Control-Allow-Origin', '*')
  // res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
  next()
)