SpringBoot2.0.2+Ajax如何解決跨域請求

這篇文章主要介紹了Spring Boot 2.0.2+Ajax如何解決跨域請求，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司溝通電話：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域10年，包括成都濕噴機(jī)等多個方面擁有豐富的網(wǎng)站制作經(jīng)驗，選擇成都創(chuàng)新互聯(lián)公司，為企業(yè)錦上添花。

問題描述

后端域名為A.abc.com，前端域名為B.abc.com。瀏覽器在訪問時，會出現(xiàn)跨域訪問。瀏覽器對于javascript的同源策略的限制。

HTTP請求時，請求本身會返回200，但是返回結(jié)果不會走success，并且會在瀏覽器console中提示：

已攔截跨源請求：同源策略禁止讀取位于 https://www.baidu.com/ 的遠(yuǎn)程資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin'）。

解決方案

1.jsonp

2.引用A站的js

3.Nginx做A站的反向代理

4.后端服務(wù)放開跨域請求

其中，以最后兩種見常。

詳細(xì)方案

本文主要描述第四種解決方案：后端服務(wù)放開跨域請求。

spring boot中放開跨域請求很簡單。

1.增加一個configuration類

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;

/**
 * 跨域訪問配置
 * @author wencst
 * @creation 2017年8月18日
 */
@Configuration
public class CustomCORSConfiguration {
 private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 corsConfiguration.addAllowedOrigin("*");
 corsConfiguration.addAllowedHeader("*");
 corsConfiguration.addAllowedMethod("*");
 return corsConfiguration;
 }
 @Bean
 public CorsFilter corsFilter() {
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 source.registerCorsConfiguration("/**", buildConfig());
 return new CorsFilter(source);
 }
}

增加此類以后，非同源http訪問可以正常進(jìn)行了，但是會不會有什么問題呢？

對于大部分網(wǎng)站依然需要使用cookie作為前后端傳輸數(shù)據(jù)的媒介，然而默認(rèn)非同源請求是不攜帶cookie信息的。

2.服務(wù)端允許跨域攜帶cookie信息

在spring boot2.0.2中，允許跨域設(shè)置比較簡單，只需增加一個configuration類即可。

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;

/**
 * 跨域訪問配置
 * @author wencst
 * @creation 2017年8月18日
 */
@Configuration
public class CustomCORSConfiguration {
 private CorsConfiguration buildConfig() {
 CorsConfiguration corsConfiguration = new CorsConfiguration();
 corsConfiguration.addAllowedOrigin("*");
 corsConfiguration.addAllowedHeader("*");
 corsConfiguration.addAllowedMethod("*");
 corsConfiguration.addExposedHeader("Content-Type");
 corsConfiguration.addExposedHeader( "X-Requested-With");
 corsConfiguration.addExposedHeader("accept");
 corsConfiguration.addExposedHeader("Origin");
 corsConfiguration.addExposedHeader( "Access-Control-Request-Method");
 corsConfiguration.addExposedHeader("Access-Control-Request-Headers");
 corsConfiguration.setAllowCredentials(true);
 return corsConfiguration;
 }
 @Bean
 public CorsFilter corsFilter() {
 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
 source.registerCorsConfiguration("/**", buildConfig());
 return new CorsFilter(source);
 }
}

增加信息后，在前端依然需要調(diào)整AJAX請求，才能在非同源請求中攜帶cookie信息。

3.前端調(diào)整

$.ajax({
 url: 'http://beta.roboming.com/api.php?s=/Public/AdminLogin.html',
 type: 'POST',
 async:true,
 xhrFields:{
  withCredentials:true
 },
 data: {
  username:userName,
  password:pwd
 },
 success: function(respon){
  console.log(respon);
  var res=eval(respon);
 },
 error: function(){
  alert('服務(wù)器發(fā)生錯誤！');
 }
});

此時，當(dāng)前端向后端服務(wù)做跨域請求時，增加

xhrFields:{
  withCredentials:true
},

就會帶上cookie信息了，同理會帶上token/sessionID等等內(nèi)容。

測試方法

spring boot中增加一個controller

@Controller
public class LoginController {
 @RequestMapping(value = "setString")
 @ResponseBody
 public String setString(HttpServletRequest request, HttpServletResponse response，@RequestParam String value) {
 request.getSession().setAttribute("username", value);
 return "OK";
 }
 @RequestMapping(value = "getString")
 @ResponseBody
 public String getString(HttpServletRequest request, HttpServletResponse response) {
 String username = (String)request.getSession().getAttribute("username");
 return username;
 }
}

增加一個index.html，來訪問跨域訪問。

<html>
<head>
<meta charset="utf-8">
<title>跨域請求</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button onclick="set()">set</button>
<br><br>
<button onclick="get()">get</button>
<script>
function set(){
 $.ajax({
 url:'http://wencst.vicp.net/setString?value=10',
 xhrFields:{
  withCredentials:true
 },
 success:function(result){
 alert(result);
 }
 });
}
function get(){
 $.ajax({
 url:'http://wencst.vicp.net/getString',
 xhrFields:{
  withCredentials:true
 },
 success:function(result){
 alert(result);
 }
 });
}
</script>
</body>
</html>

html文件可以單獨本地訪問即可出現(xiàn)效果，并不一定要形成服務(wù)訪問。

當(dāng)服務(wù)端不允許跨域訪問時，html文件訪問均報錯，并調(diào)用失敗。

當(dāng)服務(wù)端允許跨域訪問時，html請求訪問成功。

當(dāng)服務(wù)端開啟cookie傳遞，并在html文件中增加 xhrFields參數(shù)時，session生效。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Spring Boot 2.0.2+Ajax如何解決跨域請求”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享文章：SpringBoot2.0.2+Ajax如何解決跨域請求
當(dāng)前網(wǎng)址：http://bm7419.com/article8/jdigip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、做網(wǎng)站、小程序開發(fā)、App開發(fā)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營