Springbootは、参照のためにAjax Cross-Domainを解決します。特定のコンテンツは次のとおりです
1。最初の方法
1.クロスドメインリクエストをサポートする構成を書きます
Import org.springframework.context.annotation.configuration; import org.springframework.web.servlet.config.annotation.corsregistry; import org.springframework.web.servlet.config.annotation.webmvcurureradapter; * @Time 2017-07-13 */ @configurationPublic Class CORSCONFIG拡張webmvcconfigureradapter {static final string origins [] = new String [] {"get"、 "post"、 "put"、 "delete"}; @Override public void addcorsmappings(corsregistry registry){registry.addmapping( "/**")。abortorigins( "*")。 }}2。HTTP要求インターフェイス
@RestControllerPublic Class HelloController {@AutowiredHelloServiceHelloService; @getMapping(value = "/test"、生成= mediatype.application_json_utf8_value)public string query(){return "hello"; }}2。2番目の方法(推奨)
PS:最初のタイプには問題があります。サーバーが500を投げるとき、まだクロスドメインの問題があります。
@SpringBootApplication@componentscan@enablediscoveryClientPublic Class ManagementApplication {public static void main(string [] args){springApplication.run(managementApplication.class、args); } private corsconfiguration buildconfig(){corsconfiguration corsconfiguration = new corsconfiguration(); corsconfiguration.addallowedorigin( "*"); corsconfiguration.addallowedheader( "*"); corsconfiguration.addallowedMethod( "*"); corsconfiguration.addexposedheader(httpheaderconstant.x_total_count); corsconconfigurationを返します。 } / ** * Cross-Domainフィルター * * @return * / @bean public corsfilter corsfilter(){urlbasedCorsConfigurationSource source = new urlbasedcorsconfigurationsource(); source.registercorsConfiguration( "/**"、buildconfig()); // 4新しいcorsfilter(source)を返します。 }}2。index.html
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>クロスドメインリクエスト</title> <script src = "https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" $( "button")。クリック(function(){$ .ajax({url: "http:// localhost:8080/test"、success:function(result){$( "#p1")。html(result);}});});});});});}コンテンツ</button> </body> </html>3。3番目の方法は、フィルターフィルターを書き込むことです
パッケージcom.cci.market.common.filter; import java.io.ioexception; import javax.servlet.filter; Import javax.servlet.filterchain; Import javax.servlet.filterconfig; Import javax.servlet.servletexception; Import javax.servletelet.servletleteceth; javax.servlet.servletResponse; Import javax.servlet.http.httpservletresponse; Import org.springframework.stereeotype.component;/** *ハンドルクロスドメインの問題 * @author mr.zheng * @date 2016/08/08 * init(filterconfig filterconfig)servletexception {} @override public void dofilter(servletrequest req、servletresponse res、filterchainチェーン)をスローします。 Response.setheader( "Access-Control-allow-Origin"、 "*"); Response.setheader( "Access-control-allow-methods"、 "post、get、options、delete、put"); Response.setheader( "Access-Control-Max-age"、 "3600"); Response.setheader( "Access-control-allow-headers"、 "x-requested with"); Chain.dofilter(req、res); } @Override public void Destroy(){// TODO自動生成方法スタブ}}4。Nginxクロスドメイン構成
Nginxクロスドメインも比較的単純です。次の構成を追加するだけです。
location/{proxy_pass http:// localhost:8080; if($ request_method = 'options'){add_header 'access-control-allow-origin' '*'; add_header 'Access-Control-Allow-Methods' 'get、post、options'; add_header 'Access-Control-Allow-Headers' 'dnt、x-customheader、Keep-Alive、user-agent、x-requested-with、ifmodified-since、cache-control、content-type、content-range、range、token'; add_header 'Access-Control-Max-Age' 1728000; add_header 'content-type' 'テキスト/プレーン; charset = utf-8 '; add_header 'content-length' 0; 204を返します。 } if($ request_method = 'post'){add_header 'access-control-allow-origin' '*'; add_header 'Access-Control-Allow-Methods' 'get、post、options'; add_header 'Access-Control-Allow-Headers' 'dnt、x-customheader、Keep-Alive、user-agent、x-requested-with、ifmodified-since、cache-control、content-type、content-range、range、token'; add_header 'Access-Control-Expose-Headers' 'dnt、x-customheader、Keep-Alive、user-agent、x-requested-with、ifmodified-since、cache-control、content-type、content-range、range、token'; } if($ request_method = 'get'){add_header 'access-control-allow-origin' '*'; add_header 'Access-Control-Allow-Methods' 'get、post、options'; add_header 'Access-Control-Allow-Headers' 'dnt、x-customheader、Keep-Alive、user-agent、x-requested-with、ifmodified-since、cache-control、content-type、content-range、range、token'; add_header 'Access-Control-Expose-Headers' 'dnt、x-customheader、Keep-Alive、user-agent、x-requested-with、ifmodified-since、cache-control、content-type、content-range、range、token'; }}場所:add_header 'Access-Control-Expose-Headers'要求したときに持ってきたヘッダーを必ず追加してください。たとえば、この例の「トークン」は、実際にはフロントエンドからバックエンドに送信されます。覚えていないかどうかは関係ありません。ブラウザのデバッガーには詳細な指示があります。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。