JSONP解决跨域
主要实现原理就是利用script标签中的src不受同源策略的影响,从而从服务器获取数据,但是这个方式只能获取get请求得数据,不支持别的请求。
CORS
主要是服务器进行操作,在被请求的服务器中使用express框架的中间件进行相应的请求拦截从而进行响应头的配置(相当于将客户端添加到服务器可访问的白名单)
代理服务器
前后端均需操作,前端需要在vue.config.js配置文件中修改
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
//这里用了本机的服务器,所以写localhost,如果用了其他服务器把localhost换掉就好
//比如:http://192.168.156.50:3000
target: 'http://localhost:3000' // 我们要代理的真实接口地址
}
}
}
}
}
代理服务器主要原理是在客户端和服务器之间再设置一个中间服务器,中间服务器与客户端之间保持协议、域名、端口的统一(同源策略),而中间服务器和服务器之间不受同源策略的限制,可以请求数据。