- I.概要
- ウェブサイトのためのクロスドメインソリューションの第二に、5種類
- クロスドメインのウェブサイトを解決するために第三に、使用JSONP [1]
- 第四に、使用許可クロスヘッド[2]の応答を設定します
- 第五に、内部は、[3]のHttpClientを使用して転送しました
- 第六に、使用nginxのは、ゲートウェイ・インタフェースのAPIを構築する[4]
- 七、SpringCloudビルドAPIインターフェイスゲートウェイ[5]
I.概要
1.1クロスドメインサイトとは何ですか
- クロスドメインの原因：現在のウェブサイトのドメインの要求では、デフォルトのドメインは、AJAXリクエストを介して他の送信を許可されていません。
- ブラウザクロスドメインの問題が発生する理由は、サードパーティのインターフェースを呼び出す場合のAJAX要求場合は、ブラウザのドメイン名とポート番号にアクセスするための一貫性のないアクセスインタフェースAjaxのドメイン名とポート番号ならば、それはクロスドメインの問題が発生します。ポート番号とドメイン名が一致している必要がありますにする必要があり、フロントクロスドメインの問題に属していない（ブラウザのセキュリティポリシーに所属）。
1.2ウェブサイトのクロスドメインのエラーケース
ウェブサイトのためのクロスドメインソリューションの第二に、5種類
- クロスドメインのサイトを解決JSONP使用
- HttpClientを内部転送を使用します
- 使用許可クロスヘッドセット対応
- nginxのビルドエンタープライズクラスのAPIゲートウェイインターフェイスに基づいて、
- マイクロサービスAPIゲートウェイインターフェイスを構築Zuul使用
クロスドメインのウェブサイトを解決するために第三に、使用JSONP [1]
3.1フロントエンドコード
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "GET",
async : false,
url : "http://127.0.0.1:8081/ajaxJsonpB",
dataType : "jsonp",
jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data) {
alert(data["errorCode"]);
},
error : function() {
alert('fail');
}
});
});
</script>
3.2バックエンド・コード
@RequestMapping(value = "/ajaxJsonpB", method = RequestMethod.GET)
public void ajaxB(HttpServletResponse response, String jsonpCallback) throws IOException {
JSONObject root = new JSONObject();
root.put("errorCode", "200");
root.put("errorMsg", "登陆成功");
response.setHeader("Content-type", "text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.print(jsonpCallback + "(" + root.toString() + ")");
writer.close();
}
短所：ポスト要求は、より複雑な書き込みコードがサポートされていません。
第四に、使用許可クロスヘッド[2]の応答を設定します
4.1フロントエンドコード
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "GET",
async : false,
url : "http://127.0.0.1:8081/ajaxB",
dataType : "json",
success : function(data) {
alert(data["errorCode"]);
},
error : function() {
alert('fail');
}
});
});
</script>
4.2バックエンド・コード
@RequestMapping("/ajaxB")
public Map<String, Object> ajaxB(HttpServletResponse response) {
//告诉浏览器可以跨域 * 代表所有域名都可以跨域 正常将这个代码应该放在过滤器中
response.setHeader("Access-Control-Allow-Origin", "*");
Map<String, Object> result = new HashMap<String, Object>();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
コードフィルタで推奨されている実際のプロジェクト、場合、応答を設定し、クロスヘッドを許可します。
第五に、内部は、[3]のHttpClientを使用して転送しました
5.1フロントエンドコード
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "POST",
async : false,
url : "http://127.0.0.1:8080/forwardB",
dataType : "json",
success : function(data) {
alert(data["errorCode"]);
},
error : function() {
alert('fail');
}
});
});
</script>
5.2バックエンド・コード
// A项目进行转发到B项目
@RequestMapping("/forwardB")
@ResponseBody
public JSONObject forwardB() {
JSONObject result = HttpClientUtils.httpGet("http://127.0.0.1:8081/ajaxB");
System.out.println("result:" + result);
return result;
}
// B项目代码
@RequestMapping("/ajaxB")
public Map<String, Object> ajaxB(HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
第六に、使用nginxのは、ゲートウェイ・インタフェースのAPIを構築する[4]
6.1 nginxの設定
server {
listen 80;
server_name 127.0.0.1;
#A项目
location /a {
proxy_pass http://127.0.0.1:8080/;
index index.html index.htm;
}
#B项目
location /b {
proxy_pass http://127.0.0.1:8081/;
index index.html index.htm;
}
}
6.2フロントエンドコード
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "POST",
async : false,
url : "http://127.0.0.1/b/ajaxB",
dataType : "json",
success : function(data) {
alert(data["errorCode"]);
},
error : function() {
alert('fail');
}
});
});
</script>
6.3バックエンド・コード
@RequestMapping("/ajaxB")
public Map<String, Object> ajaxB(HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
result.put("errorCode", "200");
result.put("errorMsg", "登陆成功");
return result;
}
七、SpringCloudビルドAPIインターフェイスゲートウェイ[5]
SpringCloud Zuulは、APIゲートウェイインターフェイスを構築する使用します