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

约定不等于承诺〃 2021-12-10 11:07 406阅读 0赞

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

![在这里插入图片描述][20190713191326482.png]

## 搞了4天晚上还是没想明白，所有的配置都是一样，为什么不行呢？心态当时已经崩了……，但是还是想弄清楚为什么，于是做如下尝试： ##

### 分析报错原因： ###

#### 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.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;
        }

#### 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的配置问题，苍天啊，大地，终于找到解决办法了，所以说解决问题还是应该多尝试，多百度，多问大佬，再次特别感谢三哥这位大佬支持! ####

方法一、在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>

方法二、在本身的web项目的web.xml文件加如下代码(推荐第二种)

<filter>
            <filter-name>CorsFilter</filter-name>
            <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
                 
            <init-param>
                <param-name>cors.allowed.methods</param-name>
                <param-value>GET,POST,DELETE,PUT</param-value>
            </init-param>
             
            <init-param>
                <param-name>cors.allowed.origins</param-name>
                <param-value>*</param-value>
            </init-param>
             
            <init-param>
                <param-name>cors.allowed.headers</param-name>
                
                <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>

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

[20190713191326482.png]: /images/20211210/64eb0d8537d44f44a5c662dcca50cd3d.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关快速解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关完美解决Springboot跨域（No 'Access-Control-Allow-Origin' header is present on the requested resource）

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

相关解决ajax中No ‘Access-Control-Allow-Origin‘ header is present on the requested resource跨域问题

相关报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 ajax 跨域访问 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource