目录
跨域问题解决方式:
一:nginx:通用与各种请求
1、进行当前服务器的根路径拦截之后,做转发处理【利用nginx中的反向代理】
二:JSONP:只适用于get请求
1、在ajax中携带关键字dataType: 'JSONP',
利用window.open(进行跨系统页面打开)
2、JSONP这个关键字是JQ进行封装之后的模样,
内部其实是通过script标签来调用服务器提供的js脚本
三:CORS:跨域资源共享(Cross-origin resource sharing) 现在主流
1、需要服务器CORS接口,实现跨域通信【后端实现】
1.1、CorsConfig:【springboot2.0形式、主流】
1.2、原生态:过滤器形式:
1.3、http后台转发:
1.4、springcloud网关转发:
2、请求分为两部分:
一部分为简单请求:前端请求不做预请求 get head post 返回的格式分为:text/plain、multipart/form-data、application/x-www-from-urlencoded【仅限于以上内容格式】
1、在请求头中origin字段加入:对应跨域系统所实现的源、将成功返回
2、简单请求需要设置withCredentials为true|可以携带cookie信息、ssl凭证和用户信息|同域下没有作用
$.ajax({
type:post,
url:"",
xhrFields:{
withCredentials:true
},
crossDomain:true,
data:{
请求数据
},
dataType:"json",
success: function(result) {
},error:function(error){
}
});
二部分:
put
delete
connect
options
trace
patch
text/plain、multipart/form-data、application/x-www-from-urlencoded【限于以上内容格式】
1、以上内容浏览器会做一个预请求:看服务器端是否支持该请求,否则前端响应不支持信息
2、network会出现两次请求,一次为预检请求,一次是通过后的请求,
3、第一次预检请求通过后会在头部多返回一下三个字段内容:
Access-Control-Allow-Headers: 源的支持的头信息
Access-Control-Allow-Methods: 源所支持的方法
Access-Control-Allow-Origin: 源的地址
4、第二次是通过后的请求:携带以上三个字段,然后进行请求,返回结果集。
四:VUE实现跨域CORS
前台:8080
login:function(){
this.$axios.post('请求地址',请求体).then(res=>{
console.log(res.msg);
})
}
后台:8081
控制层做springboot注解:
//1、注解方式2、全局方式
@CrossOrigin(origins="/允许的地址|前端请求的地址",maxAge=3000)
@RequestMapping("/loggin")
@ResponseBody
public String loginTest(){
LOGGER.error("登入成功");
return "登入成功";
}
CrossOrigin:
origins:允许访问的域列表
maxAge:缓存的最大时间
五:nodeJS【针对vue-cli项目】
服务端:8888
启动一个server:监听端口
// server.js
// 引入express中间件 let express = require('express'); let app = express();
// 定义api 发送数据 app.get('/api', (req, res) => {
res.json({ name: 'hahaha' }) })
app.get('/test', (req, res) => {
res.json({ name: 'this is a test' }) })
// 监听服务端口 app.listen(8888, () => {
console.log('web server running at http://localhost:8888'); });
```javascript
客服端:8080
发送ajax
export default {
// ...将axios作为$http挂载在全局
async created() {
let data = await this.$http.get('/api');
console.log(data);
}
}
需要在node.config.js中加入配置,做中转:
对所有跨域的客户端做代理中转到后台
module.exports = {
// ...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8888', // 代理跨域目标地址【后台地址】
changeOrigin: true,
// pathRewrite: { // 可选 地址重写 ||前台跨域请求的白名单地址
// '^/api': ''
// }
}
}
}
}