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”

这是在前端的服务器中开辟了一个小空间，它不属于前端端口，所以对后端端口的访问没有阻碍