什么是跨域？如何解决？

最新推荐文章于 2024-07-06 09:00:00 发布

choucui0160

最新推荐文章于 2024-07-06 09:00:00 发布

阅读量143

点赞数

原文链接：https://my.oschina.net/u/2615680/blog/3079290

版权

今天做项目时候遇到了一些问题，大概就是。我做后端端口，可以返回json了，但是前端ajax调用时候遇到跨域问题。

下面说下，什么是跨域，我最后解决的方法。

1.什么是跨域？

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

2.报错情况

出现403错误 No 'Access-Control-Allow-Origin' header is present on the requested resource.

403是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站。

3.解决办法

解决方式我是尝试了很多种，最终解决了

首先是在后端的方法里加上了

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Cache-Control", "no-cache");

https://www.cnblogs.com/flyroc-cyf/p/10207507.html

但是还是有毛病，于是修改了Apache的配置文件，并导入相关包

https://blog.csdn.net/m0_37039305/article/details/89529804

准备工具，我们需要两个包：

java-property-utils-1.9.1.jar 和 cors-filter-2.5.jar

百度云地址

链接: https://pan.baidu.com/s/1JY0BZdjYO_4LWEyN8kj9uA 提取码: ss5q

服务器的相关修改

在tomcat的（tomcat安装路径下conf文件下就有相关的配置文件）Web.xml中加上如下配置

<!--  提供跨域支持 -->
    <filter>    
        <filter-name>CORS</filter-name>    
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>    
        <init-param>    
            <param-name>cors.allowOrigin</param-name>   
            <param-value>*</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedMethods</param-name>   
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedHeaders</param-name>   
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.exposedHeaders</param-name>   
            <param-value>Set-Cookie</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportsCredentials</param-name>   
            <param-value>true</param-value>   
        </init-param>    
    </filter>    
    <filter-mapping>    
        <filter-name>CORS</filter-name>    
        <url-pattern>/*</url-pattern>    
   </filter-mapping>

之后没有解决问题，

最终通过添加CORS过滤器成功了

JAVA后台配置

JAVA后台配置只需要遵循如下步骤即可:

第一步:获取依赖jar包
下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)
第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:(非maven请忽视)
```
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>
```
其中版本应该是最新的稳定版本,CORS过滤器
第三步:添加CORS配置到项目的Web.xml中( App/WEB-INF/web.xml)

<!-- 跨域配置-->    
<filter>
        <!-- The CORS filter with parameters -->
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        
        <!-- Note: All parameters are options, if omitted the CORS 
             Filter will fall back to the respective default values.
          -->
        <init-param>
            <param-name>cors.allowGenericHttpRequests</param-name>
            <param-value>true</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.allowOrigin</param-name>
            <param-value>*</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.allowSubdomains</param-name>
            <param-value>false</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, HEAD, POST, OPTIONS</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.supportedHeaders</param-name>
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.exposedHeaders</param-name>
            <!--这里可以添加一些自己的暴露Headers   -->
            <param-value>X-Test-1, X-Test-2</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
        
        <init-param>
            <param-name>cors.maxAge</param-name>
            <param-value>3600</param-value>
        </init-param>

    </filter>

    <filter-mapping>
        <!-- CORS Filter mapping -->
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

请注意,以上配置文件请放到web.xml的前面,作为第一个filter存在(可以有多个filter的)