一文搞懂跨域问题

Posted 工程师-小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一文搞懂跨域问题相关的知识,希望对你有一定的参考价值。

一文搞懂跨域问题

同源策略

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

跨域

违背了同源策略就会产生跨域,比如说在百度的后端中写了一个请求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('开启了') })
  1. 跨域资源共享(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()
})

以上是关于一文搞懂跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

一文搞懂跨域问题

一文搞懂│什么是跨域?如何解决跨域?

一文搞懂│什么是跨域?如何解决跨域?

一文搞懂│什么是跨域?如何解决跨域?

微信小程序一文带你搞懂小程序的页面配置和网络数据请求

一文搞懂进程线程协程