二、SpringBoot解决跨域问题其他前后端跨域请求解决方案

3.1

三、vue前后端交互轻松入门vue_vue如何和后端交互_莫逸风的博客-CSDN博客

在了解什么是跨域的时候我们首先要了解一个概念叫同源策略什么是同源策略呢就是我们的浏览器出于安全考虑只允许与本域下的接口交互。

不同源的客户端脚本在没有明确授权的情况下不能读写对方的资源。

请求未发送

二、SpringBoot解决跨域问题其他前后端跨域请求解决方案

在Controller层直接添加CrossOrigin注解就可以解决

继承WebMvcConfigurerAdapter或者实现WebMvcConfigurer接口

import

org.springframework.context.annotation.Configuration;

import

org.springframework.web.servlet.config.annotation.CorsRegistry;

import

org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;/***

AJAX请求跨域*

{registry.addMapping(/**).allowedOrigins(*).allowCredentials(true).allowedMethods(ORIGINS).maxAge(3600);}

}3.

response;res.addHeader(Access-Control-Allow-Credentials,

true);res.addHeader(Access-Control-Allow-Origin,

*);res.addHeader(Access-Control-Allow-Methods,

GET,

PUT);res.addHeader(Access-Control-Allow-Headers,

Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN);if

request).getMethod().equals(OPTIONS))

{response.getWriter().println(ok);return;}chain.doFilter(request,

void

org.springframework.context.annotation.Bean;

import

org.springframework.context.annotation.Configuration;

import

org.springframework.http.HttpHeaders;

import

org.springframework.http.HttpMethod;

import

org.springframework.http.HttpStatus;

import

org.springframework.http.server.reactive.ServerHttpRequest;

import

org.springframework.http.server.reactive.ServerHttpResponse;

import

org.springframework.web.cors.reactive.CorsUtils;

import

org.springframework.web.server.ServerWebExchange;

import

org.springframework.web.server.WebFilter;

import

org.springframework.web.server.WebFilterChain;

import

reactor.core.publisher.Mono;/***

author

{//这里为支持的请求头如果有自定义的header字段请自己添加不知道为什么不能使用*private

static

X-XSRF-TOKEN,token,username,client;private

static

(CorsUtils.isCorsRequest(request))

{ServerHttpResponse

response.getHeaders();headers.add(Access-Control-Allow-Origin,

ALLOWED_ORIGIN);headers.add(Access-Control-Allow-Methods,

ALLOWED_METHODS);headers.add(Access-Control-Max-Age,

MAX_AGE);headers.add(Access-Control-Allow-Headers,

ALLOWED_HEADERS);headers.add(Access-Control-Expose-Headers,

ALLOWED_Expose);headers.add(Access-Control-Allow-Credentials,

true);if

{response.setStatusCode(HttpStatus.OK);return

}1.

ServerWebExchange是一个HTTP请求-响应交互的契约。

提供对HTTP请求和响应的访问并公开额外的服务器端处理相关属性和特性如请求属性。

其他解决方案---NGINX反向代理

http://localhost:81;proxy_redirect

default;}location

原生AJAX、基于jQuery的ajax、fetch、axios

1.2

格式schema://host:port/path?query#fragment

path路径例如/abc/a/b/c

Promise是异步编程的一种解决方案从语法上讲Promise是一个对象从它可以获取异步操作的消息。

可以避免多层异步调用嵌套问题回调地域Promise对象提供了简介的API使得控制异步操作更加容易

2.2

实例化Promise对象构造函数中传递函数该函数中用于处理异步任务。

resolve和reject两个方法参数用于处理成功和失败两种情况并通过p.***n获取处理结果。

var

Promise(function(resolve,reject){//成功时调用resolve()//失败时调用reject()

});

p.***n(function(ret){//从resolve得到正常结果

},function(ret){//从reject得到错误信息

});2.3

p.***n(function(ret){//返回一个实例对象这个实例对象用于调用下一个***nreturn

new

在上面也就是如果目前获取了对象就相当于传到了ret中下一步***n中ret则可以调用其中的数据或者其他方法

2.3.2

返回的普通值会直接传递给下一个***n通过***n函数中函数的参数接收该值底层会对返回的普通值封装为一个Promise使得能够继续调用***n

hahah;

}).***n(function(ret){alter(ret);

hahah

script//Promise基本使用原生ajaxfunction

getText(url)

XMLHttpRequest();xhr.onreadystatechange

function

200){//处理正常情况resolve(xhr.responseText);}else

{reject(服务器错误);}};xhr.open(get,url);xhr.send(null);});return

p;}//链式调用解决回调地狱,return一个新的调用就可以继续调用新的***n()了。

getText(http://localhost:8088/saymo).***n(function

(data)

getText(http://localhost:8088/sayyi);},function

(info)

getText(http://localhost:8088/sayfeng)}).***n(function

(data)

{//resolve(123)//正常情况reject(出错了);//错误情况},1000)})}foo().***n(function

(data)

{alert(data);}).finally(function

{alert(结束了)})//与上面效果相同foo().***n(function

(data)

{alert(data);}).finally(function

/script2.4.2

XMLHttpRequest();xhr.onreadystatechange

function

200){//处理正常情况resolve(xhr.responseText);}else

{reject(服务器错误);}};xhr.open(get,url);xhr.send(null);});return

p;}var

getText(http://localhost:8088/saymo);var

getText(http://localhost:8088/sayyi);var

getText(http://localhost:8088/sayfeng);//result是一个数组形式的三个数据顺序和p1,p2,p3顺序相同Promise.all([p1,p2,p3]).***n(function

(result)

{alert(result);})//result返回一个数据最快返回的一个Promise.race([p1,p2,p3]).***n(function

(result)

还有一种更加简便的方法就是使用fetch接口进行调用这个是基于Promise实现的

2.5.1

fetch(url).***n(fn2).***n(fn3)....cach(fn)

基本用法

}).***n(ret{//这里得到的才是最终的数据console.log(ret);

})2.5.2

methodStringHTTP请求方法默认为GETGET、POST、PUT、DELETE

get请求参数传递

scriptfetch(http://localhost:8088/sayHi?name莫逸风,{method:get}).***n(function

(data)

fetch(http://localhost:8088/login,{method:post,body:,headers:{Content-Type:application/x-www-form-urlencoded,//

application/json//3.

fetch(http://localhost:8088/login,{method:post,body:JSON.stringify({name:莫逸风,pass:1234,}),headers:{Content-Type:application/json,}}).***n(function

(data)

json()返回结果和JSON.parse(responseText)一样

2.6

axios官网https://github.com/axios/axios是一个基于Promise用于浏览器和node.js的HTTP客户端

支持浏览器和node.js支持promise能拦截请求和相应自动转换JSON数据

2.6.1

//去github下载文件此js位于axios-master\dist

script

scriptaxios.get(http://localhost:8088/saymo).***n(function

(ret)

{//data属性是固定的用法,用于获取后台的实际数据alert(ret.data)})

/script2.6.2

get查询数据post添加数据put修改数据delete删除数据

get传递参数

axios.get(http://localhost:8088/sayhi?name莫逸风).***n(function

(ret)

axios.get(http://localhost:8088/sayhi,{params:{name:莫逸风}}).***n(function

(ret)

{//data属性是固定的用法,用于获取后台的实际数据alert(ret.data)})2.

post传递参数

axios.post(http://localhost:8088/login,{name:莫逸风,pass:1234,}).***n(function

(ret)

{//data属性是固定的用法,用于获取后台的实际数据alert(ret.data)})通过URLSearchParams传递参数

var

param.append(pass,12345);axios.post(http://localhost:8088/login,param).***n(function

(ret)

{//data属性是固定的用法,用于获取后台的实际数据alert(ret.data)})3.

data实际响应回来的数据headers响应头信息status响应状态码statusText响应状态信息

axios.post(http://localhost:8088/login,param).***n(function(ret){console.log(ret);//所有数据都包含在此对象中//对于json形式的响应数据可以直接获取不需要转换alert(ret.data.name);

})4.

axios.defaults.headers[mytoken]aqwerwqwerqwer2ewrwe23eresdff23//设置请求头5.

axios拦截器

//在这里就是在请求之前设置了拦截器用于获取网页http://localhost:8088/

axios.interceptors.request.use(function

(config)

http://localhost:8088/;alert(config.url);return

config;},function

{console.log(err);})axios.get(sayhi?name莫逸风).***n(function

(ret)

{//data属性是固定的用法,用于获取后台的实际数据alert(ret.data)})响应拦截器

axios.interceptors.response.use(function

(res)

{console.log(err);})axios.get(sayhi?name莫逸风).***n(function

(res)

{//data属性是固定的用法,用于获取后台的实际数据alert(res)})2.7

asyns/await接口调用

async/await是ES7引入的语法可以更加方便的进行异步操作

async关键字用于函数上async函数的返回值是Promise实例对象

await关键字用于async函数中await可以得到异步的结果

script

axios.get(saymo);//alert(ret.data);return

ret.data;}queryData().***n(function

(data)

axios.get(saymo);alert(ret.data);var

ret1

axios.get(sayyi);alert(ret1.data);var

ret2

ret2.data;}queryData().***n(function

(data)