Webpack处理跨域问题

今天药忘吃喽~ 2022-05-21 04:29 184阅读 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 条评论，184人围观）

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

相关阅读

相关 .Net Core 处理跨域问题

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

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

相关前端处理跨域问题

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

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

相关 Nginx处理跨域问题

1、前提条件准备： `前端网站地址：http://localhost:8080` `服务端网址：http://localhost:59200` 服务端没

朴灿烈づ我的快乐病毒、/ 2024年03月16日 10:29/ 0 赞/ 11 阅读

相关跨域、跨域问题

跨域(CORS)是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the

朴灿烈づ我的快乐病毒、/ 2023年09月27日 00:59/ 0 赞/ 138 阅读

相关优雅地处理跨域问题

> 我是 ABin-阿斌：写一生代码，创一世佳话，筑一览芳华。如果小伙伴们觉得不错就一键三连吧~ ![在这里插入图片描述][20201016161427585.png_pic

拼搏现实的明天。/ 2023年09月23日 20:39/ 0 赞/ 83 阅读

相关处理Ajax请求跨域问题

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

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

相关 springboot跨域问题处理

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

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

相关 Lumen处理跨域问题

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

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

相关 Webpack解决跨域问题

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

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

相关 Webpack处理跨域问题

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

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