美文网首页
解决ajax跨域请求问题

解决ajax跨域请求问题

作者: alterem | 来源:发表于2019-08-28 09:37 被阅读0次

自己做网站的时候,经常遇到跨域问题,下面是平时多次实践总结出的解决方法,大家有什么更好的思路,可以相互交流下~
XMLHttpRequest cannot load http://www.imooc.com/data/check_f.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
解决方法:跨源问题,添加cors。
1.filter或者servlet里面添加response.setHeader("Access-Control-Allow-Origin", "");2.response.setHeader("Access-Control-Allow-Origin", "");放到接收客户端api 的地方
3.如果是servlet的话就放到get或者post方法里面,jsp页面就扔到第一行
4.如果是filter部署就扔到dofilter()

---------------------------------springmvc---------------------------------

添加SimpleCORSFilter.java

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.HttpServletResponse;

import org.springframework.stereotype.Component;

@Component
public class SimpleCORSFilter implements Filter {

    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");
         //response.setHeader("Access-Control-Allow-Headers", "Content-Type");

                                                                                                        // response.setContentType("text/html;charset=UTF-8");
           // response.setHeader("Access-Control-Allow-Origin", "*");
           // response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
           // response.setHeader("Access-Control-Max-Age", "0");
           // response.setHeader("Access-Control-Allow-Headers", "Authentication, Origin, Accept, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, token");
           // response.setHeader("Access-Control-Allow-Credentials", "true");
           // response.setHeader("XDomainRequestAllowed","1");

        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}

}

web.xml添加

<filter>
    <filter-name>SimpleCORSFilter</filter-name>
    <filter-class>com.zhcs.context.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>SimpleCORSFilter</filter-name>
    <url-pattern>/app/*</url-pattern>
</filter-mapping>

--------------------------------------OR-------------------------------------

添加 CorsConfigureAdapter.java

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

@Configuration
@EnableWebMvc
public class CorsConfigureAdapter extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        super.addCorsMappings(registry);
        registry.addMapping("/**");
    }
}

在Controller上或方法上使用@CrossOrigin注解

@CrossOrigin(maxAge = 3600)

--------------------------------------xml-------------------------------------

<mvc:cors>
    <mvc:mapping path="/**" />
</mvc:cors>
<mvc:cors>
    <mvc:mapping path="/api/**" allowed-origins="http://domain1.com, http://domain2.com" allowed-methods="GET, PUT" allowed-headers="header1, header2, header3" exposed-headers="header1, header2" allow-credentials="false" max-age="123" />
    <mvc:mapping path="/resources/**" allowed-origins="http://domain1.com" />
</mvc:cors>

--------------------------------------Nginx支持跨域请求--------------------------------------

location /{
    add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET'; 
    ...
    the rest of your configuration here
    ...
}

立即体验

相关文章

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • webpack+vue+axios 环境下的跨域问题

    问题 在项目中向后端进行 ajax 请求时,出现游览器阻止跨域请求的问题。 引入 axios,并解决跨域 axio...

  • 14-vue-cli脚手架配置代理

    1. 问题:如果解决前端的 ajax 请求跨域的问题 首先可以发送 ajax 请求的方法有哪些? xhr js自带...

  • 解决跨域问题

    概述 在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现...

  • 跨域问题

    概述 在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现...

  • 跨域

    什么是跨域? 为什么会发生ajax跨域?浏览器限制跨域【发出的请求不是本域】XHR请求【json】 解决思路:1:...

  • Ajax跨域完全理解

    1. AJAX跨域完全问题的原因 浏览器出于安全考虑,特定限制 请求是跨域的 请求方式是XHR请求 2. 解决思路...

  • jsonp解决ajax跨域的原理

    1.jsonp只能解决GET类型的ajax请求跨域问题2.jsonp请求不是ajax请求,而是一般的get请求3....

  • ajax跨域请求问题的五种解决方案

    ajax跨域请求问题的五种解决方案 方案一: 使用跨域资源共享代理(corsproxy) 方案二: 使用jsonp...

网友评论

      本文标题:解决ajax跨域请求问题

      本文链接:https://www.haomeiwen.com/subject/ioauectx.html