ajax 跨域 获取 json文件 (不管任何语言 通用 C# / Java / python(django) / PHP)

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

一、JSONP的方式解决

$.ajax({
        url: 'http://39.106.126.16/static/json/province/anhui.jsonp',
            dataType: 'jsonp', 
            data: 'GET', 
            timeout:'8000', //访问超时
            jsonpCallback: "zxmlovecxf",//和服务器端函数名称相同
            data: {     //需要传输的数据

            },
            success: function(geoJson) { //接口访问成功执行的函数
            },
            error: function(xhr, status, error) { //接口访问失败执行的函数

            }
        }); //ajax end

注意!!! 仅仅是一个json文件的话 需要改后缀为jsonp 并且在json文件里面的内容外面包裹一个函数外壳

栗子:

原json文件内容为:

{"帅气的我":"zxm"} 

假设callback函数为zxmlovecxf 则修改为jsonp后的json内容:

zxmlovecxf({"帅气的我":"zxm"})

还有dataType一定要改json为jsonp!

并且JSONP≠JSON！

以上 是JSONP针对json的处理 那么 调用接口时 传递的方法同样是这样 在最后返回给客户端的时候 在JSON外面包裹一个回调函数就好了 即上文的zxmlovecxf.

---

二、CROS的方式

Ⅰ、PHP

• 首先在头部增加Origin和headers,在后台服务端允许跨域

  <?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

• 然后配置Apache web服务器跨域,在httpd.conf中将:

  <Directory />
     AllowOverride none
     Require all denied
  </Directory>

  改为:

  <Directory />
     Options FollowSymLinks
     AllowOverride none
     Order deny,allow
     Allow from all
  </Directory>

Ⅱ、JAVA

• 首先是过滤器filter

  public class SimpleCORSFilter implements Filter{  
      @Override  
      public void destroy() {  
      }  
      @Override  
      public void doFilter(ServletRequest req, ServletResponse res,  
              FilterChain chain) throws IOException, ServletException {  
              HttpServletResponse response = (HttpServletResponse) res;  
              response.setHeader("Access-Control-Allow-Origin", "*");  
              response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
              response.setHeader("Access-Control-Max-Age", "3600");  
              response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
              chain.doFilter(req, res);  
      }  
      @Override  
      public void init(FilterConfig arg0) throws ServletException {  
      }  
  } 

• 然后是拦截器interceptor

  @Component
  public class CORSInterceptor extends HandlerInterceptorAdapter {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //添加跨域CORS
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type,token");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        return true;
    }
  }

• 如果是单个接口需要跨域,则需要在接口实现的代码页面中添加:

   response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
            response.addHeader("Access-Control-Max-Age", "1800");//30 min

• (PS:我记得在web.xml里面还要配置一个跨域处理Filter)代码如下:

  <!-- 允许跨域 -->  
  <filter>  
      <filter-name>crossDomainFilter</filter-name>  
      <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>  
      <init-param>  
          <param-name>targetFilterLifecycle</param-name>  
          <param-value>true</param-value>  
      </init-param>  
  </filter>  
  <filter-mapping>  
      <filter-name>crossDomainFilter</filter-name>  
      <url-pattern>/*</url-pattern><!-- 配置允许跨域访问的的url-pattern -->  
  </filter-mapping>  

另外一种方法是加下面这段

public class CORSConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedHeaders("*").allowedMethods("*").allowedOrigins("http://web.321go.com");
            }
        };
    }
}

Ⅲ、.NET

• 首先是网站的配置在Web.config里面, 添加配置信息,然后重启网站:
  

  <add name="Access-Control-Allow-Origin" value="*" />
  <add name="Access-Control-Allow-Headers" value="X-Requested-With" />
  <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />

注意要把

<verbs>
<add verb="OPTIONS" allowed="false" />
</verbs>

注释掉~
* 然后如果配置还是不OK的话,可以再加更多的header允许的配置,栗子:

<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Accept,Origin" />

• 然后再次访问,如果还是有跨域的问题,那么需要看看
  
  • 接口中有没有写死的请求类型(比如写死了只能是POST)，如果有则去掉.
  • 检查接口中和IIS服务器中，是否重复配置了Origin:*，若存在,则去掉,注意 是两个里面都不能存在!!!

Ⅳ、NodeJs

• 一步到位,仅仅需要配置express为:
  

  app.all('*', function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
      res.header("X-Powered-By", ' 3.2.1')
          //这段仅仅为了方便返回json而已
      res.header("Content-Type", "application/json;charset=utf-8");
      if(req.method == 'OPTIONS') {
          //让options请求快速返回
          res.sendStatus(200); 
      } else { 
          next(); 
      }
  });

Ⅴ、Python(django)

• 首先安装django-cors-headers

  pip install django-cors-headers

• 然后配置settings.py文件

  INSTALLED_APPS = [
      ...
      'corsheaders'，
      ...
   ] 
  MIDDLEWARE_CLASSES = (
      ...
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware', # 注意顺序
      ...
  )
  
  #跨域增加忽略
  
  CORS_ALLOW_CREDENTIALS = True
  CORS_ORIGIN_ALLOW_ALL = True
  CORS_ORIGIN_WHITELIST = (
      '*'
  )
  CORS_ALLOW_METHODS = (
      'DELETE',
      'GET',
      'OPTIONS',
      'PATCH',
      'POST',
      'PUT',
      'VIEW',
  )
  CORS_ALLOW_HEADERS = (
      'XMLHttpRequest',
      'X_FILENAME',
      'accept-encoding',
      'authorization',
      'content-type',
      'dnt',
      'origin',
      'user-agent',
      'x-csrftoken',
      'x-requested-with',
      'Pragma',
  )

• 还有一种就是类似刚刚讲的java单接口添加跨域,就是在views.py中对应API的实现函数，允许其他域通过Ajax请求数据:

  def zxmlovecxf(_request): 
  response = HttpResponse(json.dumps({“帅气的我”: “zxm”, “美丽的她”: “cxf”})) 
  response[“Access-Control-Allow-Origin”] = “*” 
  response[“Access-Control-Allow-Methods”] = “POST, GET, OPTIONS” 
  response[“Access-Control-Max-Age”] = “1000” 
  response[“Access-Control-Allow-Headers”] = “*” 
  return response

---

最后啊~ 告诉大家 JSONP所有都可以用 不过呢 JSONP只能用于GET请求~!!!