龙空技术网

开发中,如何解决跨域问题?

KristenGe 22

前言:

现在看官们对“ajax默认返回值类型是什么”大约比较讲究,各位老铁们都想要学习一些“ajax默认返回值类型是什么”的相关知识。那么小编也在网摘上搜集了一些对于“ajax默认返回值类型是什么””的相关文章,希望我们能喜欢,小伙伴们快快来了解一下吧!

跨域问题

跨域问题是指浏览器在执行JavaScript代码的时候,由于浏览器同源策略的限制,只能访问同源的资源,不能跨域访问。

解决跨域问题的两种方式:

jsonp(JSON with Padding)是json的一种使用模式,前端解决跨域问题的方法,只支持GET请求,需要后端提供jsonp接口CORS(Cross-Origin Resource Sharding)跨域资源共享,后端解决跨域问题的方法jsonp

原理:

本质就是利用<script>标签的src属性不受同源策略限制,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。

后端接口示例:

接口返回拼接的函数字符串,函数字符串的参数,就是返回给前端的数据。

一个简单的jsonp请求:

<body>    <script>        function success(data) {            console.log('JSONP响应回来的数据');            console.log(data);        }    </script>    //这里返回的是一个函数调用    <script src="¶m1=xx¶m2=xxx">    </script></body>
ajax方式jsonp请求:
$.ajax({    url: '¶m2=xxx',    dataType: 'jsonp',    success: function(data) {        console.log(data);    }})// 或$.ajax({    url: '¶m2=xxx',    dataType: 'jsonp',    // 发送到服务端的参数名称,默认值为 callback    jsonp: 'callback',    // 自定义的回调函数名称,默认jquery自动生成,如果指定了jsonpCallback,就可以在ajax外做返回值处理,不然只能在success回调函数中处理返回值    jsonpCallback: 'successCallback'})function successCallback(data) {    console.log(data);}
CORS

原理:

在http响应头中设置允许跨域访问的特定字段,如 Access-Control-Allow-OriginAccess-Control-Allow-Methods Access-Control-Allow-Headers 等。

三种实现代码示例(这里代码基于springboot):

使用CorsFilter实现跨域访问:

@Beanpublic CorsFilter corsFilter() {    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();    CorsConfiguration config = new CorsConfiguration();    config.setAllowCredentials(true);    config.addAllowedOrigin("*");  // config.addAllowedOrigin(";);  // config.addAllowedOriginPattern("https://*.example2.com");    config.addAllowedHeader("*");    config.addAllowedMethod(HttpMethod.OPTIONS);    config.addAllowedMethod(HttpMethod.HEAD);    config.addAllowedMethod(HttpMethod.PATCH);    config.addAllowedMethod(HttpMethod.GET);    config.addAllowedMethod(HttpMethod.POST);    config.addAllowedMethod(HttpMethod.PUT);    config.addAllowedMethod(HttpMethod.DELETE);    source.registerCorsConfiguration("/**", config);    return new CorsFilter(source);}
使用 @CrossOrigin 注解
@CrossOrigin(origins = ";, methods = {            RequestMethod.OPTIONS, RequestMethod.GET, RequestMethod.POST})@GetMapping(value = "/account/user")public Result<User> getUserInfo(String sUserId) {}
使用 WebMvcConfigurer 实现
public class CorsConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins(";)                .allowedMethods("*");    }}

标签: #ajax默认返回值类型是什么 #ajax怎么使用返回值 #ajax收不到返回值