跨域前后端分离开发难免涉及到跨域问题，今天就来说说。当然，这只是我个人的理解。如果您有任何错误，请指正。开发环境中跨域解决Vue中跨域：在前端项目根目录新建vue.config.jsmodule.exports={publicPath:process.env.NODE_ENV==='production'?'./':'/',devServer:{proxy:{'/api':{target:'http://api.server.com',changeOrigin:true,ws:true,pathRewrite:{'^/api':''}}}};这是什么意思？简单来说，当请求路径包含/api时，请求被代理到http://api.server.com。不明白？例如：如果我想访问http://api.server.com获取一个主题，axios.get("http://api.server.com/topic/233")假设你的域名是server.com，别看没有api，浏览器就是不让你通过，不是很生气吗？这是浏览器的同源策略导致的，这就是跨域问题的根源。但！nodejs没有跨域的问题，那么利用这一点，让nodejs获取数据不就行了吗？希望大家不要问nodejs是什么。这个我真的解释不通。。。回到正题，上面的代理配置是告诉node，当访问路径中有/api的字符串时，你就接过来，然后访问http//api.server.com获取数据，然后将数据发送给浏览器，OK，跨域问题解决！鼓掌~一般来说，浏览器访问axios.get("http://server.com/api/topic/233")节点时，发现有api，就接管请求，然后访问http://api.server.com/topic/233，获取数据后返回给浏览器。聪明的你可能会问，路径中的api去哪了？是的，被吃掉了，具体是通过pathRewrite的。。。扯个题外话，我们在开发的时候，访问路径一般是http://localhost:8080/api/topic/233，问题是打包我们需要改一下http://server.com/api/topic/233的路径。毕竟你的域名不能是localhost。手动更改它是不现实的。我们需要配置webpack使用localhost进行开发和发布使用server.com在前端项目根目录下创建.env.development（开发环境）//在开发环境中配置module.exports={NODE_ENV='development'VUE_APP_BASE_API='http://localhost:8080'VUE_APP_VERSION='0.0.2'}.env.production(生产环境)//在生产环境配置module.exports={NODE_ENV='production'VUE_APP_BASE_API='http://server.com'VUE_APP_VERSION='0.0.1'}简单说下如何使用（有机会再详细说明）：创建一个utils/http.js文件importaxiosfrom'axios';//创建一个axios实例varinstance=axios.create({baseURL:process.env.VUE_APP_BASE_API,timeout:1000*12});exportdefaultinstance;importaxiosfrom'@/utils/http';axios.get("/api/topic/233")这样webpack会自动判断使用哪个域名。线上问题当你开发一个项目，发布到线上，你会发现你之前使用的所有接口都报错，为什么？我们来看看...由于生产环境没有nodejs代理访问我们，浏览器会直接访问接口http://xxx.com/api/topic/233我们的前端页面自然没有这个地址，因为实际地址是http://api.xxx.com/topic/233所以怎么办？下面轮到Nginx登场了。目前我们的服务器配置了两个服务，一个是前端页面，一个是api服务。我们需要修改前端页面的nginx配置，让它代理转发我们的路径。首先配置：server{listen80;服务器名xxx.com；根/usr/share/nginx/www/html；indexindex.phpindex.htmlindex.htm;location/api/{proxy_passhttp://api.xxx.com/;}}注意proxy_passhttp://api.xxx.com/;线？这会将http://xxx.com/api/topic/233代理到http://api.xxx.com/topic/233。注：server.com为开发时使用的域名，xxx.com为购买的域名。域名末尾必须有/。具体区别见nginxproxy_pass路径转发规则分析目录：从头搭建网站环境(php-yafnginxmariadb)Chapter1从头搭建网站环境(php-yafnginxmariadb)Chapter2从头搭建网站环境(php-yafnginxmariadb)第三章从头搭建网站环境(php-yafnginxmariadb)旁白-跨域
