解决跨域访问的问题(项目使用前后端分离)

如果觉得写得可以 或者太差 就 评论一下或者赞一下呗,多谢支持!!

当你的项目使用前后端分离后,经常就会出现跨域访问的错误,导致前台程序无法访问到后台接口.

这里提供两种解决方式:

方式一:(很简单)

  就是在 controller类的 加上 注解 :

   @CrossOrigin

   @CrossOrigin(origins = "http://localhost:9000")   仅接受http://localhost:9000发送来的跨域请求。

 如下

而且 这个注解  不仅可以写在类前面   也可以写在方法前面  ,作用当然不一样,写在类前面 就作用于整个类,而写在方法前面 就只对这个方法起作用.

方法二:

首先 需要的jar:

 <!--  跨域访问 https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>2.6</version>

</dependency>

然后在web.xml中增加

     <filter>
        <description>跨域过滤器</description>
        <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>

如果 此时web.xml 报错  则再加上maven 依赖:

<dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.6.2</version>
        </dependency>
 <dependency>
            <groupId>com.thetransactioncompany</groupId>
            <artifactId>java-property-utils</artifactId>
            <version>1.9.1</version>

        </dependency>

如果不报错 则可以不用添加

到此 后台就写好了 

剩下的就是前台发送请求了 (我这里有一个例子   可以用作参考 )

import request from '../utils/request'

class MYAJAX  extends React.Component{
  state={
    myArray : []
  }
  fetchFn = () => {
    request(
        'http://localhost:8002/getdata.html',{
            method:'GET',
            mode: 'cors',
            headers:{
                "Content-Type": "application/json"
                }
            }
      ).then((data) => data.data)
      .then(date => {
        this.setState({ myArray: date });
      });
  }

  componentDidMount() {
    this.fetchFn();
  }
  render() {
    return(
      <div>
        {
          this.state.myArray.map(
            function(username){
              return <li>{username['name']}</li>
            }
          )
        }
      </div>
    );
  }
}

export default MYAJAX;