跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resourc

1.报错信息

刚学习nginx+tomcat+spring+vue配置项目代理，在公司window7启动没有问题，可是在家里window10不行，始终报No 'Access-Control-Allow-Origin' header is present on the requested resource.错误

搞了4天晚上仍是没想明白，全部的配置都是同样，为何不行呢？心态当时已经崩了……，可是仍是想弄清楚为何，因而作以下尝试：

2 分析报错缘由：

2.1.nginx配置文件问题

解决方案:在nginx.conf添加以下代码

server {
        listen       8010;
        server_name  localhost;
        location / {
             root C:/Users/admin/Documents/;#根目录
			autoindex on;       #开启nginx目录浏览功能
			autoindex_exact_size off;   #文件大小从KB开始显示
			charset utf-8;          #显示中文
			add_header 'Access-Control-Allow-Origin' '*'; #容许来自全部的访问地址
             add_header 'Access-Control-Allow-Credentials' 'true';
             #支持请求方式
             add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; 
             add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

    }
复制代码

2.2.web项目Java代码问题

解决方案：在实现拦截器HandlerInterceptor的类里面配置请求头过滤参数，代码以下:

@Override 
public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
        httpServletRequest.setCharacterEncoding("UTF-8");
        httpServletResponse.setCharacterEncoding("UTF-8");
        httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type");
        httpServletResponse.setHeader("Access-Control-Allow-Methods","POST,OPTIONS,GET");
        return true;
    }
复制代码

2.3.前端Vue设置过滤请求头问题

解决方案：在config.js里面配置以下代码

const myaxios = axios// 不跨域的axios
  	   // 若是要跨域的话, 对axios进行一些设置,当前使用的是跨域的
  	const axiosInstance = axios.create({
  	    headers: {'Content-Type': 'application/json;charset=utf-8'},// 设置传输内容的类型和编码
  	    withCredentials: true,// 指定某个请求应该发送凭据。容许客户端携带跨域cookie，也须要此配置
  	});
复制代码

but 前面三种方案添加了，也没有处理到问题，最后找到是web.xml的配置问题，苍天啊，大地，终于找到解决办法了，因此说解决问题仍是应该多尝试，多百度，多问大佬，再次特别感谢三哥这位大佬支持!

3 解决问题

3.1 方法一

在tomcat安装目录下面\conf\web.xml添加以下代码大概在590行（在这里配置至关于全局参数，会影响全部加载在这个tomcat下的web项目）

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

复制代码

3.2 方法二

在自己的web项目的web.xml文件加以下代码(推荐第二种)

<!--CORS 跨域资源访问-->
 <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
             <!--CORS 跨域容许的方法-->
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,DELETE,PUT</param-value>
        </init-param>
         <!--CORS 跨域容许的来源-->
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
        </init-param>
         <!--CORS 跨域容许的请求头-->
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <!--注意，若你的应用中不仅有这些文件头，则须要将你应用中须要传的文件头也加上； 例如：个人应用中须要在header中传token，因此这里的值就应该是下面的配置，在原有基础上将token加上，不然，应用就不会被容许调用 <param-value>token,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> -->
            <param-value>token,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

复制代码

最后发现tomcat在公司的版本和家里的不同，还有就是web项目的web.xml少加了一段以下代码

<init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
 </init-param>
复制代码

仍在不断学习，请各位大佬留言指正不对的地方