服务端设置跨域

2022-05-06  本文已影响0人  YoungEvita

前言

本文主要介绍服务端设置跨域的方式。

正文

1、首先看一下在没有设置允许跨域的时候,从A站点请求B站点的数据,会被浏览器拦截。

跨域拦截.png

2、服务端设置允许跨域

setenv.add-response-header += ("Access-Control-Allow-Origin" => "*","Access-Control-Allow-Headers" => "*")
设置允许跨域.png

3、查看效果

A站点请求成功.png
C站点请求成功.png
查看响应头.png

4、引申

当服务端设置允许携带cookie跨域时,即服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 ‘*’ ,必须为具体的域名或IP地址。

设置了具体的域名地址之后,只有指定地址才可访问B站点的设置如下:


$HTTP["url"] =~ "^/api" {
setenv.add-response-header += ( "Cache-Control" => "no-store, no-cache, must-revalidate, post-check=0, pre-check=0" )
setenv.add-response-header += ("Access-Control-Allow-Methods" => "POST, GET, PUT, OPTIONS, DELETE","Access-Control-Allow-Headers" => "Origin, X-Requested-With, Content-Type, Accept, x-token","Access-Control-Allow-Origin" => "https://192.168.143.169","Access-Control-Allow-Credentials" => "true")
}

① A站点可以访问
A站点可以访问.png A站点请求B站点的响应头.png
② C站点不可访问
C站点被拒绝.png
③跨域携带cookie

访问A站点的时候设置一个cookie,然后从A站点去访问B站点,查看是否会携带A站点的cookie


$HTTP["url"] =~ "^/api" {
setenv.add-response-header += ( "Cache-Control" => "no-store, no-cache, must-revalidate, post-check=0, pre-check=0" )
setenv.add-response-header += ("Access-Control-Allow-Origin" => "*","Set-Cookie" => "userID=testcrossdomain;path=/;httpOnly;secure=true;SameSite=None","Access-Control-Allow-Headers" => "*",
}

A站点设置cookie.png cookie.png

通过服务端设置允许携带cookie 之后,实测还是无法生效(即使A站点设置的cookie设置了httpOnly, secure,SameSite=None 依旧不生效)

$.ajax({
    url: 'https://192.168.0.86/api/safe_switch',
    type: 'get',
    xhrFields: {
        withCredentials: true,
    },
    success: function(res) {
        console.log("success",res)
    }, 
    error: function(err) {
        console.log(err)
    }
})
谷歌未携带cookie.png

5、总结

  1. IE,chrome ,Firefox 都未携带cookie
  2. 按照上述设置服务端跨域治藏,IE,chrome可正常进行跨域请求
  3. Firefox会提示错误跨域请求未成功,根据资料添加证书例外设置之后可成功,设置成功之后服务端设置的"Access-Control-Allow-Origin" => "" 是否是无直接关系,都可访问。
  4. 如果设置了Access-Control-Allow-Credentials = true,"Access-Control-Allow-Origin" 必须指定具体域名不可设置通配符
上一篇下一篇

猜你喜欢

热点阅读