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

2018-01-03 19:54:18来源:CSDN作者:xmLove93人点击

分享

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

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

    <?phpheader('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

    @Componentpublic 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>  

Ⅲ、.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 = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_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请求~!!!

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台