ajax跨域问题(python版本)

Posted 2023-03-16

参考技术A

跨域问题来源于javascript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。即JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

注意：localhost和127.0.0.1也属于跨域。

如果Origin指定的源不在许可范围内, 服务器会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.

修改Django中的views.py文件修改views.py中对应API的实现函数，给返回值加上响应头Access-Control-Allow-Origin，允许其他域通过Ajax请求数据：

满足以下两个条件的请求。

(1) 请求方法是以下三种方法之一：

(2) HTTP的头信息不超出以下几种字段：

非简单请求就是复杂请求。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

预检请求为OPTIONS请求，用于向服务器请求权限信息的。

预检请求被成功响应后，才会发出真实请求，携带真实数据。

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

JSONP的实现步骤大致如下(参考了来源中的文章)

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

JSONP使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。

前面讲了JSONP的实现原理，现在我们可以自己写JS来实现JSONP功能。

一般情况下，我们希望这个script标签能够动态的调用，而不是像固定在html里面所以没等页面显示就执行了，很不灵活。

我们可以通过页面的触发事件操作后，通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务。实例如下：

为了更加灵活，上述我们将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。

如上，jQuery框架也当然支持JSONP，可以使用 $.getJSON(url,[data],[callback]) 方法。

与js实现的方式相比，我们并不要自己生成一个script标签，客户端也并不需要自己定义一个回调函数.

上述这种方法，很方便，不需要我们自己定义回调函数和指定回调函数名，但是，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？

我们可以使用$.ajax方法来实现。如下例：

在上小节中jsonp: \'callbacks\'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名，server端接受callback键对应值后就可以在其中填充数据打包返回。

但是，jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。

如此，我们的跨域处理即完成，支持所有的请求。

cors解决ajax跨域

此方法只支持spring4.2及以上版本

一、问题描述

A系统和B系统，A系统想通过ajax调用B系统中的后台方法（B系统SpringMVC）

二、问题解决

　　1.A系统中ajax：

                var str = "{‘id‘:‘89‘,‘fundCode‘:‘000311‘}";    
                jQuery.ajax({
                    url:‘http://172.88.88.888:8180/test/app/product/public/getManaAndComp‘,
                    type:"post",
                    dataType:"text",
                    data:{"param":str,"osFlag":‘3‘},
                    async:true,
                    success:function(serverinfo){
                        console.log(serverinfo);
                        var Data=Base64.decode(serverinfo);                            
                        Data=JSON.parse(Data);
                        console.log(Data);
                    }, // success 结束
                    error:function(){
                        console.log(‘error‘);                
                    }
                });

 

　　2.B系统配置  只需配置过滤器

　　web.xml

     <filter>
        <filter-name>cors</filter-name>
        <filter-class>com.datangwealth.common.filter.CorsConfig</filter-class>
     </filter>
     <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
     </filter-mapping>

 CorsConfig.java

package com.datangwealth.modules.monitor.service;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;



public class CorsConfig  implements Filter {

    @Override
    public void destroy() {
     
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse,
            FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", "*");           
        String token = request.getHeader("token");
        System.out.println("filter origin:"+token);//通过打印，可以看到一次非简单请求，会被过滤两次，即请求两次，第一次请求确认是否符合跨域要求（预检），这一次是不带headers的自定义信息，第二次请求会携带自定义信息。
        if ("OPTIONS".equals(request.getMethod())){//这里通过判断请求的方法，判断此次是否是预检请求，如果是，立即返回一个204状态吗，标示，允许跨域；预检后，正式请求，这个方法参数就是我们设置的post了
          response.setStatus(204); //HttpStatus.SC_NO_CONTENT = 204
          response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");//当判定为预检请求后，设定允许请求的方法
          response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, Token"); //当判定为预检请求后，设定允许请求的头部类型
          response.addHeader("Access-Control-Max-Age", "3600");                           
        }
        filterChain.doFilter(servletRequest, servletResponse); 
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
        
    } 
}

 

这样就解决了跨域的问题，跨域还可以使用jsonp、配置nginx解决。