[首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!]

1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成后重启项目服务]

原理：用自定义名如'/api'来代替你请求数据的url地址，proxyTable会自动识别你数据请求url的地址，识别/api字符，然后将/api替换为你想要请求的原网址。

"首先要确定你的vuecli是2还是3、4"

vuecli2:

在config目录的index文件中module.exports 的dev 中加入proxyTable代理。

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',// Various Dev Server settingshost: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-proxyTable: {    //下面两个/api可以改成自己定义的名字'/api': {target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)secure: true,    //如果是https,加入这句代码changeOrigin: true,     //同意跨域ws: true,pathRewrite: {'^/api': '',}}},}
}

当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径，如：

axios.get({url：'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})

(若已使用axios.create封装，可以在baseURL前面加入/api),配置完成重新npm run dev

vuecli3或4:

在根目录的vue.config.js（没有这个文件可以创建）中加入proxyTable代理。


module.exports ={
devServer: {host: "0.0.0.0",port: 8082, https: false, open: true, proxy: {            //下面两个/api可以换成自己定义的名字'/api': {target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)secure: true,    //如果是https,加入这句代码changeOrigin: true,     //同意跨域ws: true,pathRewrite: {'^/api': '',}}}}，
}

当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径，如：

axios.get({url：'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})

(若已使用axios.create封装，可以在baseURL前面加入/api),配置完成重新npm run start

到此解决了打包前的跨域问题

2.打包后可以用nginx代理来解决跨域问题。

原理：打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同，nginx作为前端服务器,它的外部跨域插件非常好配置，可以直接下载使用。

nginx就是为打包的dist文件开启一个本地的localhost地址，配置好nginx后要打开nginx开启的localhost地址来运行打包文件，而不是直接打开dist里面的index文件。

下载地址：nginx: download

下载Stable version中的第三个也就是Windows版本就可以了，下载后解压。解压后文件中的exe文件可以直接运行nginx（会弹出一个cmd窗口然后消失，可以打开资源管理器查看服务是否启动）。

在启动服务之前需要配置conf中的nginx.conf文件(配置完后在任务管理器关掉nginx后重新启动)。

打包后根据请求地址不同可以分为以下三种情况：

1、请求数据地址同样为本机开启localhost地址。（一般出现在练习环境下）

2、请求数据地址为项目甲方未配置代理的内网服务器。（一般出现在项目对接环境下）

3、请求数据地址为云服务器。【云服务器的商家一般都给自己的接口解决了跨域问题(直接https或者http请求就可以),一般可以直接请求】

根据1和2情况的不同，nginx也有两种配置方式

1、请求数据地址同样为本机开启的localhost地址。

location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8020;换成你的后端接口}放一个方便复制的代码段

再把源代码url:'http://localhost:9966/this/go'改为url:'/api/this/go'就可以了

2、请求数据地址为项目甲方未配置代理的内网服务器。（一般出现在项目对接环境下）

源代码中的请求地址该怎么写就怎么写，此处nginx不起替换作用，只是代理开启服务器。（不用担心这样改动会造成用户也需要配置nginx才能打开网页，这不是你要想的问题，这是服务器需要配置的问题）

总结：vue产生跨域问题不只是前端问题，这个问题在后端也可以加注释块解决，但是后端解决会产生漏洞，增加网站被黑风险。不要认为这是前端或者后台应该做的工作。

最全vue打包前后的跨域问题,绝对解决你的问题相关推荐

vue打包部署axios跨域问题
工具版本: [vue -V]:2.9.6 ide工具:VSCode / Idea 前提:我们前端vue工程需要单独部署一.本地使用命令运行跨域问题. 外网访问的地址:https://www.runo ...
vue项目打包部署nginx跨域
vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见 ...
VUE跨域问题的解决（没有config目录）
在网上搜索跨域问题的解决,都是需要在config目录下修改index.js,但是我创建的项目没有config目录.参考大佬的文章,得以解决 https://www.cnblogs.com/michea ...
vue如何配置服务器端跨域_客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解...
本篇博客主要说明: 前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: import App from './App.vue' import Axios ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
vue工程本地代码请求http发生跨域提示错误解决方法
这个可以使用代理进行跨域,这样看来跨域的方法就有几种了,对于iframe中的用postmassage,对于vue工程中的跨域则使用代理模式. 代理模式配置如下: 在config文件夹下找到index. ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
vue 使用axios 出现跨域请求的两种解决方法
vue 使用axios 出现跨域请求的两种解决方法参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...

最全vue打包前后的跨域问题,绝对解决你的问题

[首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!]

1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成后重启项目服务]

2.打包后可以用nginx代理来解决跨域问题。

最全vue打包前后的跨域问题,绝对解决你的问题相关推荐

最新文章

热门文章