您好,登錄后才能下訂單哦!
一、CORS概述
跨源資源共享標準通過新增一系列 HTTP 頭,讓服務器能聲明那些來源可以通過瀏覽器訪問該服務器上的各類資源(包括CSS、圖片、JavaScript 腳本以及其它類資源)。另外,對那些會對服務器數據造成破壞性影響的 HTTP 請求方法(特別是 GET 以外的 HTTP 方法,或者搭配某些MIME類型的POST請求),標準強烈要求瀏覽器必須先以 OPTIONS 請求方式發送一個預請求(preflight request),從而獲知服務器端對跨源請求所支持 HTTP 方法。在確認服務器允許該跨源請求的情況下,以實際的 HTTP 請求方法發送那個真正的請求。服務器端也可以通知客戶端,是不是需要隨同請求一起發送信用信息(包括 Cookies 和 HTTP 認證相關數據)。
二、CORS原理
例如:域名A(http://a.example)的某 Web 應用程序中通過<img>標簽引入了域名B(http://b.foo)站點的某圖片資源(https://cache.yisu.com/upload/information/20200623/121/92961.jpg)。這就是一個跨域請求,請求http報頭包含Origin: http://a.example,如果返回的http報頭包含響應頭 Access-Control-Allow-Origin: http://a.example (或者Access-Control-Allow-Origin: http://a.example),表示域名B接受域名B下的請求,那么這個圖片就運行被加載。否則表示拒絕接受請求。
三、CORS跨域請求控制方法
1.http請求頭
Origin: 普通的HTTP請求也會帶有,在CORS中專門作為Origin信息供后端比對,表明來源域。
Access-Control-Request-Method: 接下來請求的方法,例如PUT, DELETE等等
Access-Control-Request-Headers: 自定義的頭部,所有用setRequestHeader方法設置的頭部都將會以逗號隔開的形式包含在這個頭中
2.http響應頭
然后瀏覽器再根據服務器的返回值判斷是否發送非簡單請求。簡單請求前面講過是直接發送,只是多加一個origin字段表明跨域請求的來源。然后服務器處理完請求之后,會再返回結果中加上如下控制字段
Access-Control-Allow-Origin: 允許跨域訪問的域,可以是一個域的列表,也可以是通配符"*"。這里要注意Origin規則只對域名有效,并不會對子目錄有效。即http://foo.example/subdir/ 是無效的。但是不同子域名需要分開設置,這里的規則可以參照同源策略
Access-Control-Allow-Credentials: 是否允許請求帶有驗證信息,
Access-Control-Expose-Headers: 允許腳本訪問的返回頭,請求成功后,腳本可以在
Access-Control-Max-Age: 緩存此次請求的秒數。在這個時間范圍內,所有同類型的請求都將不再發送預檢請求而是直接使用此次返回的頭作為判斷依據,非常有用,大幅優化請求次數
Access-Control-Allow-Methods: 允許使用的請求方法,以逗號隔開
Access-Control-Allow-Headers: 允許自定義的頭部,以逗號隔開,大小寫不敏感
如果程序猿偷懶將Access-Control-Allow-Origin設置為:Access-Control-Allow-Origin: * 允許任何來自任意域的跨域請求,那么久存在被 DDoS攻擊的可能。
實現方式:
1、nginx配置文件配置:
server { location / { if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; # add_header 'Access-Control-Max-Age' 3600; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 200; } }
方法2:直接在tomcat安裝目錄下的lib中添加cors-filter-1.7.jar,java-property-utils-1.9.jar 這2個jar包,并且在業務項目的web.xml 中配置想要應的filter配置文件:
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.supportedMethods</param-name> <param-value>GET,POST,HEAD,PUT,DELETE</param-value> </init-param> <init-param> <param-name>cors.supportedHeaders</param-name> <param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value> </init-param> <init-param> <param-name>cors.exposedHeaders</param-name> <param-value>Set-Cookie</param-value> </init-param> <init-param> <param-name>cors.supportsCredentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
方法3:自己寫的 filter類,自己在在業務項目中配置web.xml 中配置想要的xml 文件。
如:java類filter:
public class CorsFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { // TODO Auto-generated method stub } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // TODO Auto-generated method stub HttpServletResponse res = (HttpServletResponse) response; res.setContentType("text/html;charset=UTF-8"); res.setHeader("Access-Control-Allow-Origin", "*"); res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); res.setHeader("Access-Control-Max-Age", "0"); res.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token"); res.setHeader("Access-Control-Allow-Credentials", "true"); res.setHeader("XDomainRequestAllowed","1"); chain.doFilter(request, response); } @Override public void destroy() { // TODO Auto-generated method stub } }
業務項目中的web.xml配置如下:
<filter> <filter-name>cors</filter-name> <filter-class>com.tianlong.common.base.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。