vue项目中解决跨域问题的学习笔记

最新推荐文章于 2024-09-08 11:14:16 发布

YAMATO966

最新推荐文章于 2024-09-08 11:14:16 发布

阅读量923

点赞数 1

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/weixin_62166263/article/details/131276944

版权

文章介绍了在Vue项目中解决跨域问题的两种常见方法：CORS和Proxy代理。CORS通过后端设置响应头`Access-Control-Allow-Origin`，而Proxy代理则利用vue-cli的配置将请求转发给后端，避免跨域限制。文章提供了详细的配置示例和代码解释。

摘要由CSDN通过智能技术生成

学习笔记：

跨域问题是指浏览器为了安全性，限制了不同源的页面之间的数据交互。如果你想要在vue项目中请求后端接口，可能会遇到跨域问题。

有很多方法可以解决跨域问题，这里我介绍两种常用的方法：

Cors方式跨域：这种方式是通过后端设置响应头`Access-Control-Allow-Origin`为`*`或者指定的源，允许前端请求访问。这种方式不需要前端做任何事，只需要后端或者服务器配置好就可以了。
Proxy代理方式跨域：这种方式是通过vue-cli提供的proxy功能，将前端请求转发到后端服务器，从而绕过浏览器的跨域限制。这种方式需要在vue项目的`config/index.js`文件中配置proxy属性，指定要转发的目标地址。

下面是一个使用proxy代理方式跨域的示例代码：

// config/index.js
module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}
```

```javascript
// src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    getData () {
      axios.get('/api/data.json') // 前端请求地址
        .then(res => {
          console.log(res.data) // 后端返回的数据
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

Cors方式跨域是通过后端设置响应头`Access-Control-Allow-Origin`来告诉浏览器允许哪些源的请求访问。这种方式不需要前端做任何事，只需要后端或者服务器配置好就可以了。

下面是一个Cors方式跨域的例子：

前端代码：使用ajax发送一个GET请求到`http://localhost:8080/server/cors`，并打印返回的数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/server/cors');
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

后端代码：使用Spring MVC框架，定义一个`/server/cors`的接口，返回一个字符串"SUCCESS"，并在响应头中添加`Access-Control-Allow-Origin: http://localhost:8000`，表示允许来自`http://localhost:8000`的请求访问。

@Controller
@RequestMapping("/server")
public class CorsController {
  @RequestMapping(value="/cors", method= RequestMethod.GET)
  @ResponseBody
  public String ajaxCors(HttpServletRequest request, HttpServletResponse response) throws Exception{
    response.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
    return "SUCCESS";
  }
}

浏览器效果：在浏览器中打开`http://localhost:8000/index.html`，可以看到控制台打印出了"SUCCESS"，说明跨域请求成功了。