解決跨域的幾種方式

2021-09-23 07:45:42 字數 2257 閱讀 5249

1.document.domain

由於js同源策略的限制,指令碼只能讀取和所屬文件**相同的視窗和文件屬性

對於有公共的上級網域名稱,這些伺服器上的頁面之間的跨域訪問可以通過document.domain來進行

預設document.domain存放的是載入文件的伺服器的主機名,可以手動設定這個屬性,不過只能設定成當前網域名稱或者上級網域名稱,並且必須要包含乙個.號。

舉例:zy.ttdvideo.com 可以設定成ttdvideo.com不能設定成com

注意:這兩個網域名稱必須屬於同乙個基礎網域名稱!而且所用的協議,埠都要一致,否則無法利用document.domain進行跨域

參考:2.cros

cors是乙個w3c標準,全稱是"跨域資源共享"(cross-origin resource sharing)。它允許瀏覽器向跨源伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制。只要伺服器實現了cors介面,就可以跨源通訊。

springboot框架cros配置

package com.joyware.whistlecloud.config;

import org.springframework.boot.web.servlet.filterregistrationbean;

import org.springframework.context.annotation.bean;

import org.springframework.context.annotation.configuration;

import org.springframework.web.cors.corsconfiguration;

import org.springframework.web.cors.urlbasedcorsconfigurationsource;

import org.springframework.web.filter.corsfilter;

import org.springframework.web.servlet.config.annotation.corsregistry;

import org.springframework.web.servlet.config.annotation.enablewebmvc;

import org.springframework.web.servlet.config.annotation.webmvcconfigurationsupport;

/** * 2019-5-21 15:13

* * @author guowei

*/@configuration

@enablewebmvc

public class webmvcconfig extends webmvcconfigurationsupport

*/@bean

public filterregistrationbean corsfilter()

}

cros常見的header

表明允許」 http:/haha.com "發起跨域請求

access-control-allow-origin:

表明在3628800秒內,不需要再傳送預檢驗請求,可以快取該結果(上面的資料上我們知道cros協議中,乙個ajax請求被分成了第一步的option預檢測請求和正式請求)

access-control-max-age: 3628800

表明它允許get、put、delete的外域請求

access-control-allow-methods: get, put, delete, post

表明它允許跨域請求包含content-type頭

access-control-allow-header: content-type

表明它允許cookies

access-control-allow-credentials:true

3.jsonp

利用script標籤不受同源策略的影響,動態新增script標籤,用於發起跨域請求。

eg1: 普通script標籤請求

eg2: jquery的jsonp請求

4.nginx

目前大多數都是前後端分離,開發環境中跨域的問題是最需要先解決的。

web前台:

後台介面:

nginx配置如下

server 

location /

}

解決跨域問題的幾種方式

方式一 使用ajax的jsonp 方式二 使用cors外掛程式直接解決跨域問題,一般都是用 chrome瀏覽器的cors外掛程式 方式三 在web.xml中加上以下 cors com.thetransactioncompany.cors.corsfilter cors.alloworigin cor...

前端解決跨域的幾種方式

參考1 通過jsonp跨域 jsonp 只支援get請求 jsonp 的優勢在於支援老式瀏覽器,以及可以向不支援 cors 的 請求資料。2 document.domain iframe跨域 3 location.hash iframe 4 window.name iframe跨域 5 postme...

跨域的幾種方式

協議 埠號 網域名稱 都相同才是同乙個域 只要有乙個不同就算是跨域 主網域名稱相同,子網域名稱不同也算跨域 email.qq.com和zone.qq.com就屬於主域相同,子域不同,也算是跨域 需要注意的是 協議不同 eg https和http 或者埠號不同造成的跨域,前端是無法解決的 實際工作中,...