Vue项目跨域解决方案与 vue.config.js 配置解析

为什么会出现跨域？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

情况如下图所示：

举例

我在本地启动一个服务，服务器监听端口3000

我们在vue项目直接去调该服务下接口会报错

这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。

解决方案

根据服务器之间发请求不存在跨域，设置代理服务器。

查看vue项目根目录，如果有vue.config.js文件（一般是自己引入），打开并找到devServer{ }处，加上以下代码：

devServer: {// 设置为0.0.0.0则所有的地址均能访问host: '0.0.0.0',port: 8080,https: false,hotOnly: false,// 跨域问题解决 代理（关键部分）proxy: {'/api': {target: 'http://localhost:3000', // 注意！此处为后端提供的真实接口changeOrigin: true, // 允许跨域pathRewrite: {// 如果接口中是没有api的，那就直接置空，'^/api': ''，// 如果接口中有api，那就得写成{'^/api':'/api'}'^/api': ''}}}}

核心部分

如果没有vue.config.js文件，那就找到项目中config文件夹中的index.js文件

找到proxyTable{ }处，加上与上面一样的代码

此时停止vue项目，重新启动

解决跨域问题，请求成功。若项目打包上线可使用Nginx设置代理服务器。

vue.config.js标准配置

// vue.config.js
const path =  require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路径indexPath: 'index.html' , // 相对于打包路径index.html的路径outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本productionSourceMap: !IS_PROD, // 生产环境的 source mapparallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。pwa: {}, // 向 PWA 插件传递选项。chainWebpack: config => {config.resolve.symlinks(true); // 修复热更新失效// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中config.plugin("html").tap(args => {// 修复 Lazy loading routes Errorargs[0].chunksSortMode = "none";return args;});config.resolve.alias // 添加别名.set('@', resolve('src')).set('@assets', resolve('src/assets')).set('@components', resolve('src/components')).set('@views', resolve('src/views')).set('@store', resolve('src/store'));},css: {extract: IS_PROD,requireModuleExtension: false,// 去掉文件名中的 .moduleloaderOptions: {// 给 less-loader 传递 Less.js 相关选项less: {// `globalVars` 定义全局对象，可加入全局变量globalVars: {primary: '#333'}}}},devServer: {overlay: { // 让浏览器 overlay 同时显示警告和错误warnings: true,errors: true},host: "localhost",port: 8080, // 端口号https: false, // https:{type:Boolean}open: false, //配置自动启动浏览器hotOnly: true, // 热更新// proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理proxy: { //配置多个跨域"/api": {target: "http://172.10.10.12:3000",changeOrigin: true,// ws: true,//websocket支持secure: false,pathRewrite: {"^/api": ""}},"/api2": {target: "http://172.10.12.13:8089",changeOrigin: true,//ws: true,//websocket支持secure: false,pathRewrite: {"^/api2": "/"}},}}
}

Vue项目跨域解决方案与 vue.config.js 配置解析相关推荐

node.js后端及Vue前端跨域解决方案
node.js后端及Vue前端跨域解决方案从目前我了解的情况来看,前后端跨域使用的方式有很多种,这里记录我使用最顺手的一种,即在后端使用cors跨域 node.js后端跨域解决方案先看后端的入口文 ...
vue项目跨域的问题（一个项目对接两个不同的域名、端口接口导致跨域,最好的办法是后端解决）
vue项目跨域的问题前端解决方法(一个项目对接两个不同的域名.端口接口导致跨域,最好的办法是后端解决) 前端解决方法: ①打开config文件---->index.js文件,找到 proxyTa ...
springboot + vue项目跨域请求解决方案
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 以下是跨域解决方案服务端添加一个拦截器即可 @Compon ...
Vue的跨域解决方案
如何在vue里面优雅的解决跨域,路由冲突问题? 当我们在路由里面配置成一下代理可以解决跨域问题: proxyTable:{'/goods/*':{target:'http://localhost:30 ...
vue项目跨域问题完全解决
跨域简单来说就是当前页面的url地址与请求的url地址不一致就会造成跨域解决跨域问题常用有两种解决方案 JSONP: 利用HTML中的script的src属性可以跨域的特地, 在跨域脚本中直接通过回 ...
vue项目中跨域解决方案
在项目根目录下新建vue.config.js文件,里面内容如下 module.exports={devServer: {proxy:{'/api':{target:'http://localhost: ...
node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析
1.下载vue-cli [html] view plain copy npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github ...

Vue项目跨域解决方案与 vue.config.js 配置解析

Vue项目跨域解决方案与 vue.config.js 配置解析相关推荐

最新文章

热门文章

Vue项目 跨域 解决方案与 vue.config.js 配置解析

Vue项目 跨域 解决方案与 vue.config.js 配置解析相关推荐

最新文章

热门文章

Vue项目跨域解决方案与 vue.config.js 配置解析

Vue项目跨域解决方案与 vue.config.js 配置解析相关推荐