AI智能
改变未来

axios跨域问题


axios的跨域问题

一、什么是跨域问题

要在

www.a.com

的域下访问

www.b.com

域下的资源,出于安全考虑不能这样访问,因为比如说html中的

<iframe>

标签中访问银行的页面,用户在登录我的页面后会以为这是银行界面,然后输入账号密码,但是这样会导致我也可以从我自己的页面拿到这个用户的账号密码,然后我就进去吃牢饭了,所以要拦截这种访问,当真的要进行这种访问时要单独进行配置

二、解决方法1,CORS

本机的配置情况:

静态资源服务器:http://localhost:8081

Api资源服务器:http://localhost:8080

使用的vueCLI4

前端request.js配置

import axios from \'axios\'export function request(config){//创建axios的实例const instance =axios.create({//设置要跨域访问的服务器地址baseURL:\'http://127.0.0.1:8080\',timeout:5000})instance.interceptors.request.use(res=>{//发送成功,把配置拦截下来console.log(res)//把配置信息还回去return res},err=>{//没有发送出去,比如网络有问题的时候console.log(err)})instance.interceptors.response.use(res=>{//去除一些没有用的数据,只返回我们要的datareturn res.data},err=>{console.log(err)})return instance(config)}

后端servlet中添加一个头部:

response.setHeader(\"Access-Control-Allow-Origin\", \"*\");

二、解决方式2,jsonp

<script>

标签不受到跨域限制所以可以跨域访问

JQuery的jsonp方式跨域请求:

$(document).ready(function () {$(\"#btn\").click(function () {$.ajax({url: \"http://localhost:9090/student\",type: \"GET\",dataType: \"jsonp\", //指定服务器返回的数据类型success: function (data) {var result = JSON.stringify(data); //json对象转成字符串$(\"#text\").val(result);}});});});

三、解决方法3,代理

在前端的package.json中配置

\"proxy\":\"后端api的url\"

});

## 三、解决方法3,代理在前端的package.json中配置

“proxy”:“后端api的url”

这是在前端的服务器中开辟了一个小空间,它不属于前端端口,所以对后端端口的访问没有阻碍
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » axios跨域问题