도메인 간 프런트엔드 및 백엔드 로컬 공동 디버깅

프런트엔드 및 백엔드 로컬 공동 디버깅 교차 도메인 문제

프런트엔드와 백엔드는 로컬 공동 디버깅 중에 몇 가지 함정에 직면했습니다.즉, 로컬 서비스의 인터페이스를 요청할 때 도메인 간 문제가 발생합니다.실제로 해결하기 쉽습니다.저는 vue2.x를 사용합니다. , Vue CLI 의 구성 도 참조하십시오.

설명서에 따라 vue.config.js 파일에서 구성하기만 하면 됩니다.

module.exports = {
    
    
	devServer: {
    
    
		proxy: {
    
    
          '/local': {
    
    
            target: 'url', // url:需要代理的域名，也就是联调接口的域名
            changeOrigin: true, // 需要跨域要配置为true
            pathRewrite: {
    
    
              '^/local': ''  // 类似替换字符串，将/local字符替换为空
            }
          }
        }	
	}
}
// 请求案例
axios.get('/local/XXXX').then(res => {
    
    
	console.log(res)
})
注意：如果在axios中配置了baseUrl需要将baseUrl设置为空，否则接口请求会返回404，在请求拦截中同理
config.baseURL = ''

위의 구성을 완료한 후 요청을 시도하여 교차 도메인 문제가 해결되었는지 확인하십시오 요청이 성공한 후 데이터가 성공적으로 반환되지만 요청 경로는 여전히 로컬 서비스 주소임을 알 수 있습니다. 이것은 영향을 미치지 않으며 프록시는 실제로 성공했습니다.