Webpack处理跨域问题

今天药忘吃喽~ 2022-05-21 04:29 221阅读 0赞

项目预计所有功能都实现啦，[GitHub地址][GitHub]如果有什么功能问题，提出来哈。

> 建议先注册，如果觉得注册麻烦就直接登录哈，登录名：微笑（hhh,我也不知道为啥会注册成这样的）密码：123456

接下来几篇可能就是就项目中遇到的问题，统一记录一下。

--------------------

## webpack中处理跨域问题 ##

1.  webpack代理应用的一个插件：webpack-dev-server，内置了`http-procy-middleware`可以解决请求url代理的问题。

> **原理**：应用重定向的方式解决跨域问题，即就是，当后端的接口拥有独立的API,而前端想在同一个domain下访问接口的时候，可以通过设置proxy实现。

2.webpack.config.js中配置的文件：  
![比较好玩][70]

3.使用  
注：使用的url 必须以/开始 否则不会代理到指定地址。

fetch('/user/login').then(res => {
            // 被代理到 http://test.xxx.com/user/login
            return res.json();
        }).then(res => {
            console.log(res);
        })
    
        fetch('user/login').then(res => {
            // http://localhost:8088/user/login 访问本地服务
            return res.json();
        }).then(res => {
            console.log(res);
        })

遇到的问题：

> webpack-dev-server的默认服务器端口是8080，如果设定端口8088或者别的，但是出现错误，那就是没有找到`webpack.config.js`文件，或者webpack.config,js文件有错。

报错信息：

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
    Module not found: Error: Can't resolve './src' in 'F:\HappyMmall\mall' @ multi (webpack)-dev-server/client?http://localhost:8080 ./src

## 结束！（要去睡觉了~） ##

[GitHub]: https://github.com/weiqiujuan/SauceyMall.git
[70]: /images/20220521/ced4a48c01b245509b7ebe7e8c7b1ff7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 .Net Core 处理跨域问题

一、什么是跨域（源）跨域指的是从一个域名下去请求另外一个不同的域名下的资源。说明：跨域和跨源可以看作相同，只是用词不一样二、为什么会有跨域（源）这个...

叁歲伎倆/ 2024年04月19日 15:41/ 0 赞/ 69 阅读

相关前端处理跨域问题

处理跨域问题由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为http://localhost:8080, 所

港控/mmm°/ 2024年04月06日 14:59/ 0 赞/ 97 阅读

相关跨域问题处理-网关

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 1、springBoot 被调用类或者方法上加@CrossOrigin

本是古典何须时尚/ 2023年07月08日 09:24/ 0 赞/ 22 阅读

相关处理Ajax请求跨域问题

前言从刚接触前端开发起，`跨域`这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么

我不是女神ヾ/ 2023年02月18日 10:55/ 0 赞/ 127 阅读

相关 springboot跨域问题处理

版本springboot1.X import org.springframework.context.annotation.Configuration; im

雨点打透心脏的1/2处/ 2023年01月05日 04:00/ 0 赞/ 158 阅读

相关跨域处理

跨域处理故心故心故心故心小故冲啊 -------------------- 文章目录跨域处理前言一、cors(后端处理跨越,也是最简单

亦凉/ 2022年12月18日 09:57/ 0 赞/ 167 阅读

相关 Lumen处理跨域问题

1. 导包 composer require barryvdh/laravel-cors 1 2.注册包在 “bootstrap” 文件夹下的 “app.ph

怼烎@/ 2022年10月17日 10:49/ 0 赞/ 197 阅读

相关 Webpack解决跨域问题

代码： 1.在webpack配置文件中配置： "devServer": { // contentBase："./" // 本地服务器在哪个目

电玩女神/ 2022年05月30日 05:23/ 0 赞/ 181 阅读

相关 Webpack处理跨域问题

项目预计所有功能都实现啦，[GitHub地址][GitHub]如果有什么功能问题，提出来哈。 > 建议先注册，如果觉得注册麻烦就直接登录哈，登录名：微笑（hhh,我也不知道为

今天药忘吃喽~/ 2022年05月21日 04:29/ 0 赞/ 222 阅读

相关处理跨域

处理跨域的三种方式 jsonp处理跨域总结 cors处理跨域 nginx处理跨域 Vue反向代

た入场券/ 2021年07月24日 15:28/ 0 赞/ 399 阅读