这个可以使用代理进行跨域&＃xff0c;这样看来跨域的方法就有几种了&＃xff0c;对于iframe中的用postmassage&＃xff0c;对于vue工程中的跨域则使用代理模式。
代理模式配置如下&＃xff1a;
在config文件夹下找到index.js文件。找到module.exports下边的proxyTable属性&＃xff0c;改成&＃xff1a;
// proxyTable: {},//代理才能跨域发送请求proxyTable: devEnv.OPEN_PROXY &＃61;&＃61;&＃61; false ? {} : {&＃39;/proxyApi&＃39;: {target: &＃39;http://192.168.10.30:10308/&＃39;,//目的ipchangeOrigin: true,//跨域pathRewrite: {&＃39;^/proxyApi&＃39;: &＃39;/&＃39;}}},
其中devEnv是我从当前同目录文件夹下的dev.env.js中const devEnv &＃61; require(&＃39;./dev.env&＃39;)引入的变量。dev.env.js内容为&＃xff1a;
&＃39;use strict&＃39;
const merge &＃61; require(&＃39;webpack-merge&＃39;)
const prodEnv &＃61; require(&＃39;./prod.env&＃39;)module.exports &＃61; merge(prodEnv, {NODE_ENV: &＃39;"development"&＃39;,OPEN_PROXY: true // 是否开启代理, 重置后需重启vue-cli
})
另外在配置下axios请求路径中的
const defaultBaseUrl &＃61; &＃39;http://192.168.10.30:10308&＃39;
const BASEURL &＃61; process.env.NODE_ENV !&＃61; &＃39;production&＃39; && process.env.OPEN_PROXY ? &＃39;/proxyApi/&＃39; : defaultBaseUrl
export default {//接口代理配置loginTocken:BASEURL&＃43;&＃39;/config/user_login.action&＃39;,}
其中process.env值在dev.env.js中&＃xff1a;
&＃39;use strict&＃39;
const merge &＃61; require(&＃39;webpack-merge&＃39;)
const prodEnv &＃61; require(&＃39;./prod.env&＃39;)module.exports &＃61; merge(prodEnv, {NODE_ENV: &＃39;"development"&＃39;,OPEN_PROXY: true // 是否开启代理, 重置后需重启vue-cli
})
结果&＃xff1a;
划红线的地方就被代理到那个IP地址了。
顺便说下&＃xff0c;里边加个时间戳的作用&＃xff0c;是为了防止本地缓存的作用。
京公网安备 11010802041100号