1.几乎跨域是前端面试题中必问的
每次这样问 一是问我们产生跨域的原因,解决的跨域的原理
原因无非就是浏览器的同源策略导致 不同源头的服务器地址 浏览器默认是不会使用回来的数据 记住并不是请求失败了 而是回来数据 浏览器根据同源策略原则 而不使用
解决方法:1 后端配合 写一个请求用来'欺骗'浏览器是是同源发来的数据 2.JSOPN方式跨域 这个同学最好还是知道它的原理为好
但是上面并不是我们今天要讲解的
跨域问题往往都是客户端向服务器端发送请求导致 那么服务器向服务器发送请求就可以 那这个代理模式就根据这个来的
js中还有一种设计模式叫做代理模式
我们客户端 中的 A 界面 向 B页面 请求数据 是不会产生 跨域问题
这样我们 A是被代理界面 B是代理页面 A页面往服务器C发送请求 C将数据重定向到B页面 然后A请求B页面 这样A页面往C服务器的跨域问题就可以解决了
笔者使用的 @vue/cli 4.* 版本上 在 vue.config.js中配置
module.exports = {
devServer: {
open: true,
/* 使用代理 */
proxy: {
'/api': {
target: 'http://localhost:8088/', //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': '' // 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:8090/users'，直接写‘/api/users’即可
}
}
}
}
}
配置完 记得重启 服务器 这里让我们重新复习下 原生的ajax的写法
let url = '/api/users' // 在写请求地址的 时候 直接 /api/users 就可以
let xmlhttp
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
}else{
xmlhttp=ActiveXObject(Microsoft.XMLHTTP)
}
xmlhttp.open('get', url, true)
xmlhttp.send()
// 服务器端响应
xmlhttp.addEventListener('readystatechange', () => {
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
let obj = JSON.parse(xmlhttp.responseText)
console.log(obj)
}
})
最后祝大家在工作中顺利解决
