vue前端跨域处理

本文介绍了在Vue项目中遇到跨域问题时的一种解决方法——通过配置代理服务器实现跨域请求。详细解释了如何在vue.config.js文件中设置devServer属性来完成代理配置。

原因:浏览器访问遵循同源策略,同源:协议/域名:端口 要相同,当访问非同源地址就会出现跨域问题。

在vue中处理跨域的方法一般就是vue代理服务器proxy跨域。

在vue.config.js中进行配置

devServer: {
    // 端口号
    // port: 8890,
    // 配置是否自动启动浏览器
    open: false,
    // 是否启用https
    https: false,
    proxy: {
      // 代理
      "/api": {
        target: process.env.VUE_APP_SERVE_URl,     //要代理访问的路径
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },

更详细的介绍可以看看这个:vue跨域处理

### 解决Vue.js中的CORS请求问题 #### 使用代理服务器 一种常见的方式是在开发环境中配置代理服务器。对于基于Webpack的Vue CLI项目,可以在`vue.config.js`中添加如下配置来设置代理[^4]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:5001', // 后端API地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这使得所有的 `/api` 开头的请求都会被转发到指定的目标URL上。 #### 修改后端响应头部实现CORS支持 如果拥有对后端代码的控制权,则可以直接在HTTP响应中加入必要的CORS头部信息。例如,在Java Spring Boot环境下,可以通过控制器上的注解方式快速开启特定接口的访问权限[^5]: ```java @CrossOrigin(origins = "http://localhost:8080") @GetMapping("/greet") public String greet(){ return "Hello, world!"; } ``` 上述例子允许来自 `http://localhost:8080` 的资源发起对该路径下的GET请求。 #### 利用浏览器内置机制——JSONP 尽管现代浏览器已经广泛支持CORS标准,但在某些特殊场景下可能仍需考虑采用较老的技术方案如JSONP。不过需要注意的是,由于安全性原因以及仅限于GET类型的局限性,除非必要不推荐优先选用此法[^1]。 #### 客户端库层面调整Axios默认行为 当利用axios发送网络请求时,也可以通过全局设定baseURL参数简化书写并集中管理不同环境下的基础链接;另外还可以自定义headers字段以满足更复杂的认证需求等[^3]。 ```javascript import axios from 'axios'; // 设置公共的基础url和其他选项 const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL || '/', }); export default instance; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值