快捷導(dǎo)航

前后端項(xiàng)目分離解決cors錯(cuò)誤的方法詳解

更新時(shí)間：2023年02月15日 11:27:32 作者：ych_0901

隨著前后端分離技術(shù)的越來越盛行,跨域問題也逐漸凸顯了出來,下面這篇文章主要給大家介紹了關(guān)于前后端項(xiàng)目分離解決cors錯(cuò)誤的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

前后端分離項(xiàng)目中接口請(qǐng)求會(huì)出現(xiàn)cors錯(cuò)誤，引發(fā)cors錯(cuò)誤的原因?yàn)榭缬蛘?qǐng)求失敗。

具體解決方法有配置類重寫addCorsMappings方法、controller添加@CrossOrigin注解、使用nginx解決跨域請(qǐng)求

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、什么是跨域請(qǐng)求

例如：http://192.168.1.100:8080為java項(xiàng)目服務(wù)器鏈接，當(dāng)前端頁(yè)面鏈接中傳輸協(xié)議（http、https）、ip地址、服務(wù)端口任有一個(gè)不同，即為跨域。

二、配置類重寫addCorsMappings方法

1、CorsConfig配置類添加@Configuration注解

2、繼承WebMvcConfigurer

3、重寫addCorsMappings方法

完成后再啟動(dòng)項(xiàng)目時(shí)會(huì)自動(dòng)加載

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        //設(shè)置允許跨域的路徑
        registry.addMapping ("/**")
        //設(shè)置允許跨域請(qǐng)求的域名
        .allowedOriginPatterns ("*")
        //是否允許證書
        .allowCredentials (true)
        //設(shè)置允許的方法
        .allowedMethods ("GET","POST")
        //設(shè)置允許的header屬性
        .allowedHeaders ("*")
        //允許跨域時(shí)間
        .maxAge (3600);
    }
}

三、controller添加@CrossOrigin注解

注：添加@CrossOrigin注解解決跨域請(qǐng)求僅限springboot項(xiàng)目，且所有controller層添加太過繁瑣，也可在父controller中添加，所有子controller繼承

四、使用nginx解決跨域請(qǐng)求

1、http://nginx.org/en/download.html 從nginx官網(wǎng)下載解壓

2、編輯conf下的nginx.conf

 server {
        listen       80;	#配置nginx端口
        server_name  localhost;		#需要鏈接的IP地址

        location / {
            root   E:/xxx/xxx/webapp;		#web代碼存放路勁
            index  index.html;		#啟動(dòng)nginx后打開的頁(yè)面
        }

		#將含有/api的接口進(jìn)行代理
        location /api/ {
            proxy_pass  http://localhost:8081;		#需要訪問的后端鏈接
        }

3、啟動(dòng)nginx

打開cmd命令窗口進(jìn)入到解壓路徑（含有nginx.exe的路徑），輸入nginx.exe啟動(dòng)nginx，在瀏覽器輸入localhost:80即可打開前端代碼頁(yè)面。
直接關(guān)閉cmd窗口無法停止nginx，需在cmd輸入nginx -s quit命令進(jìn)行停止。

注：輸入nginx.exe的頁(yè)面無法繼續(xù)輸入命令行，需重新開啟一個(gè)cmd窗口。