前后端分离开发中,本地前端开发调用接口会有跨域问题,一般有以下几种解决方法:

  • 直接启动服务端项目,再将项目中的资源url指向到前端服务中的静态资源地址,好处在于因为始终在服务端的环境中进行资源调试,不存在接口的跨域访问问题,但是缺陷也比较明显,需要同时启动两套环境,还需要借助nginx,charles等工具进行资源地址的代理转发,配置比较繁琐,对开发者对网络的理解和环境配置要求较高,资源开销也大;

  • CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 等配置,利用跨域资源共享实现跨域,前端部分只要求支持xhr2标准的浏览器,但是服务端在请求头中需要在header中做响应头配置,在一定程度上还是对服务端的接口设置有一定的依赖;

  • http-proxy:用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,由于利用了http-proxy代理的模式进行了转发,采用的是服务对服务的模式,能较为完美解决本地开发时候的跨域问题,也是本文中推荐的方式。

参考:

https://segmentfault.com/a/1190000009266900

webpack之跨域的更多相关文章

  1. webpack+vue-cil跨域配置接口地址代理

    在vue项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http:/ ...

  2. webpack proxyTable 跨域

    dev-server能在开发环境中生成一个本地服务器来实现代理 在vue-cli下 找的 dev下的 proxyTable: { '/':{ //前缀 target: 'http://www.exam ...

  3. vue 新版本 webpack 代理 跨域设置

    旧版本中:dev-server.js 这段去掉 var apiRoutes = express.Router() //getList apiRoutes.get('/getDiscList', fun ...

  4. webpack 解决跨域问题

    一.webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 安装:npm install --save http-proxy-middleware 二 ...

  5. webpack实现跨域

    在devServer字段下配置proxy. // 本地开发 Server 配置 const DEV_SERVER_CONFIG = { historyApiFallback: true, hot: t ...

  6. Webpack4 学习笔记七 跨域服务代理

    webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...

  7. 简单设置,解决使用webpack前后端跨域发送cookie的问题

    最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项 ...

  8. Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...

  9. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

随机推荐

  1. Portal故障定位思路

  2. LintCode - Copy List with Random Pointer

    LintCode - Copy List with Random Pointer LintCode - Copy List with Random Pointer Web Link Descripti ...

  3. 单片机小白学步系列(二十) IO口原理

    IO口操作是单片机实践中最基本最重要的一个知识,本篇花了比較长的篇幅介绍IO口的原理. 也是查阅了不少资料,确保内容正确无误,花了非常长时间写的. IO口原理原本须要涉及非常多深入的知识,而这里尽最大 ...

  4. js学习笔记14----DOM概念及子节点类型

    1.概念 DOM:Document Object Model---文档对象模型 文档:html页面 文档对象:页面中的元素 文档对象模型:是一种定义,为了能够让程序(js)去操作页面中的元素. DOM ...

  5. AJAX乱码解决新方法

    用过AJAX的朋友肯定知道javascript是使用UTF-8国际编码,即每个汉字用3个字节来存储,但是这就造成了用AJAX来send数据的时候出现乱码.     有一种解决办法就是使用encodeU ...

  6. 重点:怎样正确的使用QThread类(注:包括推荐使用QThread线程的新方法QObject::moveToThread)

    背景描述: 以前,继承 QThread 重新实现 run() 函数是使用 QThread唯一推荐的使用方法.这是相当直观和易于使用的.但是在工作线程中使用槽机制和Qt事件循环时,一些用户使用错了.Qt ...

  7. selenium测试(Java)--浏览器控制(四)

    1. 控制浏览器窗口大小 1 package com.test.window; 2 3 import org.openqa.selenium.Dimension; 4 import org.openq ...

  8. C的内存四大区

    前提 看视频得来的内容,只知道不止4个区,但主要是这4个区. 四区 静态区 用于存放所有的全局变量和静态变量. ; //静态区 int main(){ ; //静态区 ; } 代码区 就是存放程序的执 ...

  9. linux -- Ubuntu开启root账户,并切换到root用户登陆

    启用root账户 ubuntu 的root账户具有最高的系统权限,它类似于windows系统中的管理员账号,但是比windows系统中管理员账号的权限更高,一般都情况下不要使用root账户,但是有的时 ...

  10. 建造者模式(build pattern)-------创造型模式

    将一个复杂对象的构建与它的标示分离,使得同样的构建过程可以创建不同的标示. 建造者模式是较为复杂的创建型模式,它将客户端与包含多个组成部分(或部件)的复杂对象的创建过程分离,客户端无须知道复杂对象的内 ...