㈠ web前端跨域的一些解決方案
沒有歸納之前對跨域的一些說法是模糊的，什麼jsonp啊，跨域原理啊，心裡只有一個大概的說法，知道這個東西，然後用的時候直接網路Ctrl+C，後來閑下來決定整理一波這些知識點，需知其所以然。
那麼，其實這是瀏覽器對我們的一種保護機制，把壞人擋在門外。那麼，問題來了，我們怎麼確定門外的人到底是好人還是壞人呢？瀏覽器關上了壞人的一扇門，留給了我們好人一扇窗。
JSONP跟JSON沒有關系..就好像JavaScript和Java一樣
瀏覽器對script、img（這些標簽的請求方式都是 GET ，所以jsonp不支持 POST ）這種標簽沒有限制，我們就可以這樣干
因此，實現CORS通信的關鍵是伺服器。只要伺服器實現了CORS介面，就可以跨源通信。
伺服器端對於CORS的支持，主要就是通過設置 Access-Control-Allow-Origin 來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。 更多有關跨域資源共享 CORS 的知識
瀏覽器中可以查看對應的響應頭，舉個例子，如下
服務端允許CORS，服務端需要針對介面設置的一系列響應頭 (Response Headers)
1.簡單請求
目前大多數情況都採用這種方式。簡單請求只需要設置 Access-Control-Allow-Origin 即可。滿足以下兩個條件，就屬於簡單請求。
2.非簡單請求
非簡單請求會發出一次預檢測請求，返回碼是204，預檢測通過才會真正發出請求，這才返回200。來看栗子：
非簡單請求需要根據不同情況配置不同的響應頭，一系列響應頭配置項見上方
這個說法相信不陌生，我們依然使用前端域名請求，然後有一個 中介商---代理 把這個請求轉發到真正的後端域名上，那也就不存在跨域問題了。
比較普遍的Nginx，簡單的配置一下就可以了。了解更多的配置信息： nginx詳解
然後前端這邊的請求地址是 http://localhost:9099/api/xxx ,然後Nginx監聽到地址是 localhost:9099/api 的請求，就幫我們轉發到真正的服務端地址 http://.com
CORS與JSONP的使用目的相同，但是比JSONP更強大。JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優勢在於支持老式瀏覽器，以及在服務端同意jsonp方式時，可以向不支持CORS的網站請求數據。Nginx可以說是最方便的，不過需要部署Nginx才行，需要對伺服器有一定的理解，不太適合剛入門的同學，當然也可以請後台同學幫忙部署。
window.postMessage(data,origin) 是 HTML5 的一個介面，專注實現不同窗口不同頁面的跨域通訊。
現在是這么一個情況,由於同源策略的限制下， a.html 不能操作iframe( b.html )裡面的dom，那麼使用postMessage就可以解決這一情況
然後 b.html 頁面通過message事件監聽並接受消息:
這種方式只適合主域名相同，但子域名不同的iframe跨域。
比如主域名是 http://.com/:8888 ，子域名是 http://child..com/:8888 ，這種情況下給兩個頁面設置相同的document.domain即document.domain = .com 就可以訪問各自的window對象了。
前端跨域整理
不要再問我跨域的問題了
㈡ 如何解決前端跨域問題
可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器，也可以在伺服器是設置代理，使用代理轉發請求。
㈢ 前端跨域的幾種解決方案
1.Cookie、LocalStorage和IndexDB無法讀取
2.DOM和JS對象無法獲取
3.Ajax請求不能發送
1.簡單請求
2.非簡單請求
1.請求方法是以下三種方法之一.
2.HTTP請求頭必須是下面幾種欄位
對於簡單請求就是瀏覽器直接發出CORS,具體來說就是請求頭添加Origin欄位
如果Origin指定的域名在許可范圍內,伺服器返回的響應，會多出幾個頭信息響應欄位
1.Access-Control-Allow-Origin：必選
2.Access-Control-Allow-Credentials:可選
3.Access-Control-Expose-Headers
"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裡面，關鍵欄位是Origin，表示請求來自哪個源。
除了Origin欄位，「預檢」請求的頭信息包括兩個特殊欄位。
1.Access-Control-Request-Method
2.Access-Control-Request-Headers
伺服器收到「預檢」請求以後，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers欄位以後，確認允許跨源請求，就可以做出回應。
㈣ 前端跨域如何解決
什麼是跨域？
跨域是通俗的說是從一個域名去請求另一個域名的資源。比如從 www..com 頁面去請求 www.taobao.com 的資源。
跨域嚴格一點來說：兩個域名只要協議，域名，埠中只要有一個不同，就被成為跨域
瀏覽器為什麼要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止壞人隨意拿到我們的信息去做壞事
在團隊的配置中，我們為了減少前端對後端的依賴，提高開發效率，使前後端職責更清晰等等因素，我們不得不面對跨域的問題，那我們該怎麼解決呢？
1、 JSONP
原理：瀏覽器對script的資源引用沒有同源限制，同時資源載入到頁面後會立即執行，所以通過動態插入script標簽即可達到跨域的請求
特點：數據為json格式
缺點：不能post
2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定義了在跨域訪問資源時瀏覽器和伺服器之間如何通信。CORS背後的基本思想是使用自定義的HTTP頭部允許瀏覽器和伺服器相互了解對方，從而決定請求或響應成功與否
特點 ：是 JSONP 模式的現代版。支持更多的請求方式，XMLHttpRequest
缺點：需後端配合修改，現代瀏覽器支持cors，老瀏覽器依舊要用JSONP
3、 PROXY
原理：proxy代理用於將請求攔截，然後通過伺服器來發送請求，然後再將請求的結果傳遞給前端
node通常用 node-http-proxy 即可
proxy太通用了，weblack-dev-server里已集成，使用時直接配置即可 webpack-dev-server proxy代理
㈤ 前端解決跨域都有哪些方法
什麼是跨域？
瀏覽器發送的請求地址（URL）與所在頁面的地址 不同（埠/協議/域名 其一不同）。簡言之，瀏覽器發出的請求url，與其所在頁面的url不一樣。此時，同源策略會讓瀏覽器拒收 伺服器響應回來的數據，報錯信息如下：
最常用的四種跨域解決方案
1.cors
cors跨域資源共享允許是在服務端"Access-Control-Allow-Origin"欄位設置的，當將cors設置為允許某個地址訪問時，該地址就可以跨域訪問這個伺服器地址。當cors設置為"*"時即允許所有地址訪問時，則表示所有地址都可以跨域訪問這個伺服器地址的資源。
2、 通過jsonp跨域
Jsonp是Json的一種「使用模式」，他就可以解決瀏覽器遇到的跨域問題，我們可以動態創建script，再請求一個帶參網址實現跨域通信。用Jsonp請求得到的是JavaScript，相當於直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸，我們可以通過Windows的message事件來監聽發送跨文檔消息傳輸內容。
4、proxy（代理）
原理：因為同源策略只是針對瀏覽器的安全策略，但是服務端並不受同源策略的限制，也就不存在跨域的問題。
㈥ 跨域以及解決跨域的幾種方式
跨域是指瀏覽器允許向伺服器發送跨域請求，從而克服Ajax只能 同源 使用的限制。
同源策略 是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議 + 域名 + 埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
常見的跨域場景：
對於簡單請求，瀏覽器會直接發出CORS請求，具體的就是在頭信息中，增加一個 Origin 欄位。
非簡單請求是那種對伺服器有特殊要求的請求，譬如 put delete 方法，或者 Content-Type 欄位類型是 application/json 的，非簡單請求在正式通信前，會增加一次請求，稱為預檢請求，也就是 options 方法。
瀏覽器先詢問伺服器，當前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息欄位。只有得到肯定答復，瀏覽器才會發出正式的 XMLHttpRequest 請求，否則就報錯。
與簡單請求不同的是， option 請求多了2個欄位：
Access-Control-Request-Method ：必須欄位，用來列出瀏覽器的CORS請求會用到哪些HTTP方法。
Access-Control-Request-Headers ：該欄位是一個逗號分隔的字元串，指定瀏覽器CORS請求會額外發送的頭信息欄位。
伺服器收到"預檢"請求以後，檢查了 Origin 、 Access-Control-Request-Method 和 Access-Control-Request-Headers 欄位以後，確認允許跨源請求，就可以做出回應。
表明伺服器支持的所有跨域請求的方法。
表明伺服器支持的所有頭信息欄位，不限於瀏覽器在"預檢"中請求的欄位。
表示是否允許發送認證信息（Cookie）。
指定本次預檢請求的有效期，單位為秒，允許緩存。在緩存期間，不用發出另一條預檢請求。
㈦ 前端的跨域問題理解
前端真的的是亂的一筆。--來自iOS開發者的一聲哀鳴
需要把前端看成兩部分，一部分是頁面，另一部分是介面（或者加數據資源）。前端頁面中調介面是有限制的，同源策略(SOP)要求我們調用的介面必須和頁面在同一域名下，說是為了保證數據的安全。所謂同源：協議+域名+埠
但實際情況是，在前後端分離的大趨勢下，好多頁面和介面的伺服器分布在不同的域名下。比如在開發時，前端頁面分為本地環境、測試環境、模擬環境、正式環境，而介面也分為測試環境、模擬環境、正式環境，當然也可以有本地環境。他們在不同的域名下或IP下或者埠下，是不同源的。或者平時我們也能遇到需要調用不同的伺服器數據資源。顯然，同源策略保障了部分安全的同時，給開發造成了很多的麻煩。
所以，跨域問題是每個前端繞不過去的坎兒。
解決辦法有兩個方向，一個是前端解決，一個是服務端介面解除限制。
前端解決就是通過jsonp、jquery ajax、axios配置代理等。還有個簡單的，比如Mac用戶，可以使用Charles工具設置代理，臨時使用。
服務端解決可以通過nginx反向代理設置允許跨域請求的域名、或者設置Access-Control-Allow-Origin，允許跨域資源共享等。
具體解決方案可參考 https://segmentfault.com/a/1190000011145364
反觀iOS，輪廓簡直不要太清晰，大部分時候只用專注於開發，沒有各種亂七八糟的事情。
㈧ 後端解決前端跨域請求問題
場景：前後端分離，頁面和後端項目部署在不同伺服器，出現請求跨域問題。
原因：CORS：跨來源資源共享（CORS）是一份瀏覽器技術的規范，提供了 Web 服務從不同網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是 JSONP 模式的現代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以讓網頁設計師用一般的 XMLHttpRequest，這種方式的錯誤處理比JSONP要來的好，JSONP對於 RESTful 的 API 來說，發送 POST/PUT/DELET 請求將成為問題，不利於介面的統一。但另一方面，JSONP 可以在不支持 CORS 的老舊瀏覽器上運作。不過現代的瀏覽器（IE10以上）基本都支持 CORS。
預檢請求（option）:在 CORS 中，可以使用 OPTIONS 方法發起一個預檢請求(一般都是瀏覽檢測到請求跨域時，會自動發起)，以檢測實際請求是否可以被伺服器所接受。預檢請求報文中的 Access-Control-Request-Method 首部欄位告知伺服器實際請求所使用的 HTTP 方法；Access-Control-Request-Headers 首部欄位告知伺服器實際請求所攜帶的自定義首部欄位。伺服器基於從預檢請求獲得的信息來判斷，是否接受接下來的實際請求。
解決方案：
1、創建一個過濾器，過濾options請求。
package com.biz.eisp.sci.util;
import org.apache.commons.httpclient.HttpStatus;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 解決跨域問題
*
*/
public class CorsFilterimplements Filter {//filter 介面的自定義實現
public void init(FilterConfig filterConfig)throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
response.setHeader("Access-Control-Allow-Origin", "*");
if ("OPTIONS".equals(request.getMethod())){//這里通過判斷請求的方法，判斷此次是否是預檢請求，如果是，立即返回一個204狀態嗎，標示，允許跨域；預檢後，正式請求，這個方法參數就是我們設置的post了
response.setStatus(HttpStatus.SC_NO_CONTENT); //HttpStatus.SC_NO_CONTENT = 204
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");//當判定為預檢請求後，設定允許請求的方法
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with"); //當判定為預檢請求後，設定允許請求的頭部類型
response.addHeader("Access-Control-Max-Age", "1"); // 預檢有效保持時間
}
filterChain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
2、修改web.xml文件
<filter>
<filter-name>cors</filter-name>
<filter-class>com.biz.eisp.sci.util.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/* </url-pattern>
</filter-mapping>
3、spring-mvc.xml添加HttpRequestHandlerAdapter http請求處理器適配器。
HttpRequestHandlerAdapter作為HTTP請求處理器適配器僅僅支持對HTTP請求處理器的適配。它簡單的將HTTP請求對象和響應對象傳遞給HTTP請求處理器的實現，它並不需要返回值。它主要應用在基於HTTP的遠程調用的實現上。
<bean class="org.springframework.web.servlet.mvc.HttpRequestHandlerAdapter"/>
㈨ 前端跨域解決 （vscode live server proxy 代理）
這個顯然是處理前端跨域最優的方法了，在此記錄下來方便以後使用，附送scss 轉 css
使用 vscode IDE作為編寫工具
1.搜索並載入 vscode 插件 live server
2.要文件根目錄創建 ".vscode" 目錄
3.在 .vscode 目錄下創建settings.json
4.proxUri 為代理的目標地址
5.baseUri 識別代理的符號 （如下例中 baseUri: '/api', 則以"/api"開頭的網路請求都將被識別為需要代理轉發的地址，並把 『/api』重寫為空""）
1.ajax請求會受到瀏覽器同源策略的限制（同源 = 域名 + 埠 都一致）
2.ajax請求默認攜帶 同源下的所有cookie, 如果不做限制 a 去請求 b 的時候就等於把a所有的cookie 都告訴b。
3.同源下： 張三的網站只能訪問張三的內容如鞋子衣服吃飯等等，如果想訪問李四的，瀏覽器就不讓你幹了。如果充許這么乾的話，張三的cookie隱私將直接暴露給李四，李四有可能幹一些不懷好意的事情。
4.跨域情況：張三把錢都放在李四那裡，現在張三想去李四那邊取錢，這時候就需要跨域了。
5.跨域怎麼解決呢？接下來把解決問題的思路簡單描繪一下。
5.1：李四告訴全世界說我對錢不感興趣，只要我有，你們所有人都隨便來取。因此，當瀏覽器看到張三要取錢的人是李四這種慈善家，就不再攔著你了。
5.2：李四不是慈善家怎麼辦？於是張三這個時候就很討厭瀏覽器，想了個辦法繞過瀏覽器，然後另外找了個代理去跟李四取錢
5.2.1: 問題是繞過瀏覽器？怎麼繞呢？ 於是張三自己建了個伺服器，每次要跟李四取錢的時候就欺騙瀏覽器說我要跟自己的伺服器取錢，瀏覽器這個時候也就不再攔著你了
5.2.2：當張三自己的伺服器接收到跟李四取錢任務後，就以proxy代理的身份向李四取錢，取完錢之後再通過瀏覽器給了張三
5.2.3：vscode 中的live server 插件裡面就這個代理向李四取錢的代理伺服器功能，本文settings.json 中包含了配置信息
6.當然還有一些很多牛叉的解決跨域的方法。若有興趣的同學可以一起研究探討。
㈩ 瀏覽器跨域及其解決方案
title: 瀏覽器跨域及其解決方案
author: May
date: 20220428</pre>
什麼是跨域跨域的表現解決跨域問題- 瀏覽器設置(不推薦)- 前端的非正統解決方式- CORS(跨域資源共享)- 配置nginx反向代理
跨域 出於瀏覽器的同源策略限制， 同源 是指協議、域名、埠都一樣， 同源策略（Sameoriginpolicy） 是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。
調用頁面時介面數據不返回，控制台中會有紅色的報錯信息中有類似於 CORS policy 關鍵字。另外，在最新谷歌瀏覽器中，會有提出類似於loaded over HTTPS此種關鍵字，均可以考慮為跨域導致。
[圖片上傳失敗...(image-26deed-1651135597111)]
tips: 有的時候後台小夥伴使用postman測試好的介面，前端不可以使用，原因就是postman不是瀏覽器，不會有同源限制，同理移動設備app開發和小程序開發也不會有這個問題。這個不是前端bug，同源限制也不是一個不好的規則。
雖然跨域不是一個不好的事情，但是對於前後端分離的web開發來說確實需要解決的，大致的解決方案可分為：
直接從根源解決問題，讓瀏覽器安全策略不起作用。這個方法雖然可以解決問題但是不現實。
官方正統解決方案， CORS規范 允許伺服器向瀏覽器返回一些HTTP Headers，瀏覽器可以基於這些HTTP Headers來決定是否突破SOP的限制。需要後端配合，瀏覽器需要什麼，介面服務給什麼。
nginx是一個高性能的HTTP和反向代理web伺服器，nginx用來解決跨域問題的原理與 前端非正統解決方式 的 proxy 的思路是一致的。項目請求介面由nginx服務發出，獲取到的數據再經由nginx傳遞給前端項目，這樣前端的請求其實都是由nginx處理的，就沒有跨域發生了。