① 手機APP和web服務端 跨域問題
跨域問題來源於javaScript的同源策略，即只有 協議+主機名+埠號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。
在以前，前端和後端混雜在一起， 比如JavaScript直接調用同系統裡面的一個Httphandler，就不存在跨域的問題，但是隨著現代的這種多種客戶端的流行，比如一個應用通常會有Web端，App端，以及WebApp端，各種客戶端通常會使用同一套的後台處理邏輯，即API， 前後端分離的開發策略流行起來，前端只關注展現，通常使用JavaScript，後端處理邏輯和數據通常使用WebService來提供json數據。一般的前端頁面和後端的WebService API通常部署在不同的伺服器或者域名上。這樣，通過ajax請求WebService的時候，就會出現同源策略的問題。
需要說明的是，同源策略是JavaScript裡面的限制，其他的編程語言，比如在C#，Java或者iOS等其他語言中是可以調用外部的WebService，也就是說，如果開發Native應用，是不存在這個問題的，但是如果開發Web或者Html5如WebApp，通常使用JavaScript ajax對WebService發起請求然後解析返回的值，這樣就可能存在跨域的問題。
一般的，很容易想到，將外部的資源搬到同一個域上就能解決同源策略的限制的。即在Web網站上同時開發一個Http服務端頁面，所有JavaScript的請求都發到這個頁面上來，這個頁面在內部使用其他語言去調用外部的WebService。即添加一個代理層。這種方式可以解決問題，但是不夠直接和高效。
目前，比較常見的跨域解決方案包括JSONP (JSON with padding)和CORS (Cross-origin resource sharing )。一些解決方案需要客戶端和服務端配合如JSOP，一些則只需要服務端配合處理比如CORS。下面分別介紹這兩種跨域方案，以及服務端WebService如何支持這兩種跨域方案。
JSONP以及WebService的支持
同源策略下，某個伺服器是無法獲取到伺服器以外的數據，但是html裡面的img,iframe和script等標簽是個例外，這些標簽可以通過src屬性請求到其他伺服器上的數據。而JSONP就是通過script節點src調用跨域的請求。
當我們向伺服器提交一個JSONP的請求時,我們給服務傳了一個特殊的參數,告訴服務端要對結果特殊處理一下。這樣服務端返回的數據就會進行一點包裝，客戶端就可以處理。
舉個例子，服務端和客戶端約定要傳一個名為callback的參數來使用JSONP功能。比如請求的參數如下:
http://www.example.net/sample.aspx?callback=mycallback
如果沒有後面的callback參數，即不使用JSONP的模式，該服務的返回結果可能是一個單純的json字元串，比如：
{ foo : 'bar' }
如果和服務端約定jsonp格式，那麼服務端就會處理callback的參數，將返回結果進行一下處理，比如處理成：
mycallback({ foo : 'bar' })
可以看到，這其實是一個函數調用，比如可以實現在頁面定義一個名為mycallback的回調函數：
mycallback = function(data)
{
alert(data.foo);
};
現在，請求的返回值回去觸發回調函數，這樣就完了了跨域請求。
如果使用ServiceStack創建WebService的話，支持Jsonp方式的調用很簡單，只需要在AppHost的Configure函數裡面注冊一下對響應結果進行過濾處理即可。
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
ResponseFilters.Add((req, res, dto) =>
{
var func = req.QueryString.Get("callback");
if (!func.isNullOrEmpty())
{
res.AddHeader("Content-Type", ContentType.Html);
res.Write("<script type='text/javascript'>{0}({1});</script>"
.FormatWith(func, dto.ToJson()));
res.Close();
}
});
}
JSONP跨域方式比較方便，也支持各種較老的瀏覽器，但是缺點很明顯，他只支持GET的方式提交，不支持其他Post的提交，Get方式對請求的參數長度有限制，在有些情況下可能不滿足要求。所以下面就介紹一下CORS的跨域解決方案。
CORS跨域及WebService的支持
先來看一個例子，我們新建一個基本的html頁面，在裡面編寫一個簡單的是否支持跨域的小腳本，如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX跨域請求測試</title>
</head>
<body>
<input type='button' value='開始測試' onclick='crossDomainRequest()' />
<div id="content"></div>
<script type="text/javascript">
//<![CDATA[
var xhr = new XMLHttpRequest();
var url = 'http://localhost:8078/json/ShopUserLogin';
function crossDomainRequest() {
document.getElementById("content").innerHTML = "開始……";
if (xhr) {
xhr.open('POST', url, true);
xhr.onreadystatechange = handler;
xhr.send();
} else {
document.getElementById("content").innerHTML = "不能創建 XMLHttpRequest";
}
}
function handler(evtXHR) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
document.getElementById("content").innerHTML = "結果：" + response;
} else {
document.getElementById("content").innerHTML = "不允許跨域請求。";
}
}
else {
document.getElementById("content").innerHTML += "<br/>執行狀態 readyState：" + xhr.readyState;
}
}
//]]>
</script>
</body>
</html>
然後保存為本地html文件，可以看到，這個腳本中，對本地的服務http://localhost:1337/json/Hello 發起了一個請求， 如果使用chrome 直接打開，會看到輸出的結果，不允許跨域請求。 在javascript控制台程序中同樣可以看到錯誤提示：
那麼如果在返回響應頭header中注入Access-Control-Allow-Origin，這樣瀏覽器檢測到header中的Access-Control-Allow-Origin，則就可以跨域操作了。
同樣，如果使用ServcieStack，在很多地方可以支持CORS的跨域方式。最簡單的還是在AppHost的Configure函數裡面直接寫入：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
this.AddPlugin(new CorsFeature());
}
這樣就可以了，相當於使用默認的CORS配置：
CorsFeature(allowedOrigins:"*",
allowedMethods:"GET, POST, PUT, DELETE, OPTIONS",
allowedHeaders:"Content-Type",
allowCredentials:false);
如果僅僅允許GET和POST的請求支持CORS，則只需要改為：
Plugins.Add(new CorsFeature(allowedMethods: "GET, POST"));
當然也可以在AppHost的Config裡面設置全局的CORS，如下：
/// <summary>
/// Application specific configuration
/// This method should initialize any IoC resources utilized by your web service classes.
/// </summary>
/// <param name="container"></param>
public override void Configure(Container container)
{
base.SetConfig(new EndpointHostConfig
{
GlobalResponseHeaders = {
{ "Access-Control-Allow-Origin", "*" },
{ "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
{ "Access-Control-Allow-Headers", "Content-Type" },
},
});
}
現在運行WebService，使用postman或者Chrome調用這個請求，可以看到返回的值頭文件中，已經加上了響應頭，並且可以正常顯示返回結果了：
CORS使用起來簡單，不需要客戶端的額外處理，而且支持Post的方式提交請求，但是CORS的唯一一個缺點是對客戶端的瀏覽器版本有要求，支持CORS的瀏覽器機器版本如下：
總結
本文介紹了JavaScript中的跨域基本概念和產生的原因，以及如何解決跨域的兩種方法，一種是JSONP 一種是 CORS,在客戶端Javascript調用服務端介面的時候，如果需要支持跨域的話，需要服務端支持。JSONP的方式就是服務端對返回的值進行回調函數包裝，他的優點是支持眾多的瀏覽器， 缺點是僅支持Get的方式對服務端請求。另一種主流的跨域方案是CORS，他僅需要服務端在返回數據的時候在相應頭中加入標識信息。這種方式非常簡便。唯一的缺點是需要瀏覽器的支持，一些較老的瀏覽器可能不支持CORS特性。
跨域支持是創建WebService時應該考慮的一個功能點，希望本文對您在這邊面有所幫助，文中是使用ServiceStack來演示跨域支持的，如果您用的WCF的話，知道跨域原理的前提下，實現跨域應該不難。
參考資料：
https://github.com/ServiceStack/ServiceStack/wiki/Customize-HTTP-Responses
https://github.com/ServiceStack/ServiceStack/wiki/Request-and-response-filters
http://stackoverflow.com/questions/8211930/servicestack-rest-api-and-cors
http://stackoverflow.com/questions/15224038/rename-callback-parameter-for-jsonp
② uniapp算觸屏h5開發(uniapph5+)
uniapp之h5反向代理設置踩坑,解決跨域問題1、uniapp可以適應多個平台開發，你會發現在HBuilderX上的內置瀏覽器上調介面，沒問題；在小程序中，也沒問題；連接手機聯調也沒問題；當後台設置允許跨域之後，前端h5需要進行設置反向代理才能解決這個問題。
2、這個原因暫未找到在uniapp的H5版本，接入騰訊雲滑動驗證，示例的點擊滑動驗證元素是通過dom操作的，但是無效，可能跟uniAPP不支持dom操作有關系，採用定製接入方法一，手動調用。
3、默認情況下，不接受運行在HTTPS上，且使用了無效證書的後端伺服器。
uniapph5為什麼性能好
①兼容性好Uni-app最大的特點就是一套代碼編譯以後多端通用，開發人員不需要在每個平台都單獨開發一套代碼，節省了大量的成本。
好就好在，uniapp的寫法就是vue的寫法，上手很快，並且一些app的原生功能也都能滿足，而且調試打包，各種配置也簡單明了。
OK，就這了。技術本身無所謂好壞，只有適合不適合。有時基於時間、項目成本、人員技術水平，只要合適就是最好的。
第三，跨平台的能力，uni-app能夠跨多個終端，H5，安卓，Ios，微信小程序，網路小程序，頭條小程序，支付寶小程序，真正實現了一套代碼，多端運行，而且很好適應了我國的市場。
uniapp開發APP端是最爽的，整體體驗比之前的mui高了很多，跟小程序的體驗類似，但是比小程序流暢，在iOS端，體驗上跟原生很接近。
uniapp是一個跨平台的基於Vuejs的前段框架，一次開發，支持包括小程序，APP，H5等等的8個端。
uni-app發布H5流程1、③開發速度快由於uni-app是用HBX進行開發，所以支持vue的語法。④拓展性強Uni-app支持nvue，封裝了H5+。同時，還支持原生的iOS和安卓開發。⑤開發團隊支持多目前uni-app的開發團隊DCloud發布新版本的頻率比較頻繁。
2、隨著vue3的發布，uni-app也逐步支持vue3。目前小程序平台已支持，hApp平台暫不支持。
3、需要特別注意的一點是，利用瀏覽器在進行移動H5頁面調試時候，會出現頁面刷新之後頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。
4、前提：不是真的跟原生通信，是通過uniapp打包成原生，H5跟uniapp通信。
uniapp發布H5應用,並在nginx部署項目編譯後，是放在一個h5目錄下的，如果你的項目有自己的名字，就是基礎路徑不為/，比如/gzh，那部署的時候也得放在gzh目錄下，並配置nginx指明：如果項目里訪問api到後台的話，需要配置：完畢。
首先在manifest.json文件中進行基礎配置，獲取uni-app的ID號，填寫應用名稱，應用描述，版本名稱以及版本號。然後在H5配置模塊，填寫頁面標題等基礎信息。點擊發行-》網站-PCWeb或手機H5-》填寫網站標題，網站域名。
h5項目打包，部署到伺服器，分享訪問域名。例如：http：//.com.cn新建一個wep2App項目，啟動看是否已經可以通過新項目正常訪問嵌入的域名：發行→雲打包→使用公共測試證書，點擊打包。
需要特別注意的一點是，利用瀏覽器在進行移動H5頁面調試時候，會出現頁面刷新之後頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。