搭建一個前臺uniapp，后臺springboot的開發(fā)環(huán)境時，遇到了跨域問題。

console提示錯誤信息：

Access to XMLHttpRequest at 'http://10.0.180.203/api/cms/getAdList?apId=1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

network查看交互消息出現(xiàn)403錯誤碼：

之前搭建vue開發(fā)環(huán)境時也遇到過，需要配置代理服務(wù)器

代理服務(wù)器配置方法如下：

uni-app H5跨域問題解決方案（CORS、Cross-Origin） - DCloud問答

我選擇修改manifest.json的方案：

uni-app踩坑+小改造 - 掘金

修改時因為出現(xiàn)兩個api（代理地址中有一個，baseUrl中也有一個），配好以后如果不通，可以用瀏覽器打開或者用api測試工具測試代理地址的api接口。

springboot后臺服務(wù)器請求根地址：http://10.0.180.203/api

webpack-dev-server代理服務(wù)器請求根地址：http://localhost:8080/apiproxy?

?springboot后臺服務(wù)器請求業(yè)務(wù)地址：http://10.0.180.203/api/rms/getPositionList?page=1&limit=10&latitude=&longitude=&pcitycode=220100000000

webpack-dev-server代理服務(wù)器請求業(yè)務(wù)地址：

http://localhost:8080/apiproxy/rms/getPositionList?page=1&limit=10&latitude=&longitude=&pcitycode=220100000000

?springboot后臺服務(wù)器業(yè)務(wù)地址請求截圖：

??webpack-dev-server代理服務(wù)器請求截圖

?通過測試代理地址的api接口，發(fā)現(xiàn)代理地址請求路徑中沒有“/api”，說明“/api”已經(jīng)隱藏在代理服務(wù)器后面，通過代理地址訪問時，不對外顯示。

/config/index.config.js配置：

// config/index.config.js

const CONFIG = {
        //開發(fā)環(huán)境配置
        development: {
                loginTitleTxt: "歡迎使用人才直聘", // 登錄頁標題
                copyrightTxt: "人才直聘v1.0", // 版本信息
                assetsPath: "/static/img", // 靜態(tài)資源路徑
                baseUrl: "http://localhost:8080/apiproxy",//"http://10.0.180.203/api", //"http://192.168.0.106:8080/api",  "http://localhost:8080/apiproxy"
				// baseUrl: "https://job.qinkonglan.cn/api",
				// baseUrl: "/api",//H5請選用該地址調(diào)試
                tokenKey: "WECHAT_TRADE", // 登錄標識
                testOpenId: "oEjRxwy7jL9PgG0kWeb4VcDTZEas", // 小程序測試openId
                forcedLogin: false, // touristMode游客模式下APP是否強制用戶登錄 場景：當用戶進入登錄頁面后無法后退。
                touristMode: true, // APP是否開啟游客模式， 游客模式true開啟：APP打開后可以進入首頁和無權(quán)限的頁面，游客模式false關(guān)閉：APP打開后首先需要登錄才能進入， 此時forcedLogin配置項失效。
        },

        //生產(chǎn)環(huán)境配置
        production: {
                loginTitleTxt: "人才直聘", // 登錄頁標題
                copyrightTxt: "人才直聘v1.0", // 版本信息
                assetsPath: "/static/img", // 靜態(tài)資源路徑
				// baseUrl: "http://192.168.0.106:8092/api",
                baseUrl: "https://job.qinkonglan.cn/api",
                tokenKey: "WECHAT_TRADE", // 登錄標識
                testOpenId: "oEjRxwy7jL9PgG0kWeb4VcDTZEas", // 小程序測試openId
                forcedLogin: false, // touristMode游客模式下APP是否強制用戶登錄 場景：當用戶進入登錄頁面后無法后退。
                touristMode: true, // APP是否開啟游客模式， 游客模式true開啟：APP打開后可以進入首頁和無權(quán)限的頁面，游客模式false關(guān)閉：APP打開后首先需要登錄才能進入， 此時forcedLogin配置項失效。
        }

}
export default CONFIG[process.env.NODE_ENV];

?manifest.json配置

{
    "name" : "人才直聘",
    "appid" : "",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    "app-plus" : {
        /* 5+App特有相關(guān) */
        "modules" : {},
        /* 模塊配置 */
        "distribute" : {
            /* 應(yīng)用發(fā)布信息 */
            "android" : {
                /* android打包配置 */
                "permissions" : [
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            "ios" : {},
            /* ios打包配置 */
            "sdkConfigs" : {},
            "splashscreen" : {
                "ios" : {
                    "iphone" : {
                        "retina40" : ""
                    }
                }
            }
        },
        "splashscreen" : {
            "waiting" : true,
            "alwaysShowBeforeRender" : false,
            "autoclose" : false,
            "delay" : 0
        }
    },
    /* SDK配置 */
    "quickapp" : {},
    /* 快應(yīng)用特有相關(guān) */
    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : true,
            "minified" : false,
            "postcss" : true,
            "es6" : true
        },
        "permission" : {
            "scope.userLocation" : {
                "desc" : "用于設(shè)置公司位置信息或者職位工作地點"
            }
        },
        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
    },
    "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "proxy" : {
                "/apiproxy" : {
                    // "target" : "http://localhost:8099/api/",
                    "target" : "http://10.0.180.203/api", //"https://xxxxn/api",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/apiproxy" : "/"
                    }
                },
                "/gaode" : {
                    "target" : "https://restapi.amap.com/v3/geocode/regeo",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/gaode" : "/"
                    }
                },
                "/qq" : {
                    "target" : "https://apis.map.qq.com/ws/geocoder/v1/",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/qq" : "/"
                    }
                }
            }
        },
        "sdkConfigs" : {
            "maps" : {
                "qqmap" : {
                    "key" : "TZCBZ-R333W-T27RS-OX3SB-RRJET-AWFVF"
                }
            }
        }
    }
}

所以配置在manifest.json中的原服務(wù)器地址已經(jīng)設(shè)置/api路徑時，在/config/index.config.js中的baseUrl項就不需要再配置/api路徑了，只需要配置替代路徑"/apiproxy"，當然如果替代路徑也寫為“/api”，配置就像使用外部地址一樣，/config/index.config.js中的baseUrl項只修改地址和端口號即可。

錯誤配置示例

文章來源地址http://www.zghlxwxcb.cn/news/detail-684234.html

到了這里，關(guān)于HBuilderX修改manifest.json設(shè)置，解決跨域問題（CORS、Cross-Origin）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！