vue-cli3跨域问题(已解决)

在vue cli3项目中没有config文件,没有index.js文件,如何解决跨域问题?

其实很简单,是我想的太复杂了,只需要在vue项目的根目录下新建一个vue.config.js的文件(vue默认识别这个文件),在文件中配置跨域信息就行了,代码如下:

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
      //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 
  // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue-cli中的跨域问题可以通过配置代理服务器来解决。在vue.config.js配置文件中,可以使用devServer的proxy选项来设置代理。具体操作如下: 1. 在项目根目录下找到vue.config.js文件。 2. 找到devServer选项,并在其中添加proxy配置。 3. 在proxy中设置需要代理的请求地址,以及目标地址。 4. 重启项目,验证跨域问题是否解决。 例如,如果需要代理请求地址以/api开头的请求,并将其转发到线上的地址,可以按照以下格式配置proxy: ```javascript module.exports = { devServer: { // ...省略其他配置 proxy: { '/api': { target: 'http://线上的地址' } } } } ``` 同时,需要确保在axios请求中不设置baseURL,即去掉baseURL配置项。然后重启项目,验证跨域问题是否解决。 请注意,这种代理配置只适用于开发阶段,不适用于生产环境。\[2\] #### 引用[.reference_title] - *1* *3* [如何解决跨域问题以及vuecli开发环境用代理服务器解决跨域问题](https://blog.csdn.net/weixin_45371730/article/details/121892285)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-cli解决跨域问题](https://blog.csdn.net/Moraxz/article/details/128414628)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值