如何解决跨域

如何解决跨域

1、什么是跨域

比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求，因为Ajax 只能向自己的服务器发送请求

而当A 网站非要向 B 网站发送 Ajax请求时，就会产生跨域

2、跨域的产生

受同源政策的影响，如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源，而要向不同源的地址发送请求，即跨域就会产出

3、解决方法

3.1、解决跨域有很多种，这里列出常用3种

方法	实现原理
jsonp	借助script标签的src属性，通过src发送请求，将json数据作为填充的内容，在服务器端将json数据作为函数的参数，将json填充到函数当中
cors	就是给服务器做一些配置，当客户端发送请求时，如果浏览器检测请求是跨域的，就会自动在请求头中加入origin字段,服务器会根据字段的值是否同意这次请求，服务器同意这次请求会在响应头加入（access-control-access-origin）字段
服务器端代理	用客户端访问自己的服务器，再由自己的服务器向另一个服务器发送请求,当服务器返回数据后，再由自己的服务器返回给自己的客户端

3.2、jsonp实现步骤

1、将不同源的服务器端请求地址写在 script 标签的 src 属性中

<script src="www.example.com"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>```

2、服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数

 const data = 'fn({name: "张三", age: "20"})';
 res.send(data)

3、在客户端全局作用域下定义函数 fn

function fn (data) { }

4、在 fn 函数内部对服务器端返回的数据进行处理

function fn (data) { console.log(data); }

3.3、cors实现步骤

给服务器端设置响应头

app.use((req,res,next)=>{
    // 代表允许所有的客户端访问
    res.header('Access-Control-Allow-Origin','*')
    // 允许post和get请求
    res.header('Access-Control-Allow-Methods','get,post')
    // 放行
    next()
})

3.4、服务器端代理实现步骤

1、客户端设置请求地址为server

ajax({
      url:'http://localhost:3000/server',
      success:function(data){
         console.log(data)
    }
})

2、给自己服务器设置server路由，再利用request模块向另一个3001端口服务器发送cors请求

app.get('/server',(req,res)=>{
    request('http://localhost:3001/cors',(err,response,body)=>{
        console.log(err)//null
        console.log(response)
        console.log(body)
        res.send(body)  
    })
})

3.5、跨域携带cookies信息

在使用ajax发送跨域请求时，默认情况下是不会携带cooies，主要为了安全
解决方法：在服务器端为以下设置属性为true

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

1、在客户端发送请求时，为withCredentials设置属性为true

loginBtn.onclick=function(){
            // 将表单解析成form表单对象
           const formdata= new FormData(loginForm)
           // 创建ajax
           const xhr=new XMLHttpRequest()
           // 请求方式与请求地址
           xhr.open('post','http://localhost:3001/login')
           // ------------------------------当发送跨越请求时携带cooikes
           xhr.withCredentials=true
           // 将表单对象发送给服务器
           xhr.send(formdata)
            xhr.onload=function(){
                console.log(xhr.responseText)
            }
        }

2、在3001端口服务器为Access-Control-Allow-Credentials字段设置为true

// cors跨域设置
app.use((req,res,next)=>{
    // 代表允许所有的客户端访问
    res.header('Access-Control-Allow-Origin','http://localhost:3000')
    // 允许post和get请求
    res.header('Access-Control-Allow-Methods','get,post')
    // -------------------------------允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials',true)
    // 放行
    next()
})

注意：如果跨域请求中涉及到cookie信息传递，Access-Control-Allow-Origin字段值不可以为*号 应该为具体的域名信息

ps: 如果该文章对你有帮助，希望能不吝为我点赞！！