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

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

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

这里提供两种解决方式:

方式一:(很简单)

就是在 controller类的加上注解 :

@CrossOrigin

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

如下

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

方法二:

首先需要的jar:

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

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

猜你喜欢