解決跨域訪問的問題(項目使用前後端分離)

如果覺得寫得可以 或者太差 就 評論一下或者贊一下唄,多謝支持!!

當你的項目使用前後端分離後,經常就會出現跨域訪問的錯誤,導致前臺程序無法訪問到後臺接口.

這裏提供兩種解決方式:

方式一:(很簡單)

  就是在 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;