最实用的手把手教你前端（本地和部署的）跨域问题解决

前端跨域问题解决（小白最适用）

首先什么是跨域：下面就是非官方，大家通常喜欢说的就是浏览器不能执行其他网站的脚本；类似于我要执行其他网站的接口。就是说它是由浏览器的同源策略造成的，是浏览器加的安全机制。
同源策略：不懂得就百度。域名，协议，端口相同；那么跨域是啥：来来来，敲黑板----->域名，协议，端口任一一个不同都存在跨域，包括协议（就是http/https）。
下面教你如何玩转跨域。首先找到config.js文件夹。在代理服务处加上你要调用的服务；

    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.1.666:8080`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "/"
        }
      },
      //VUE_APP_BASE_API_wlw----》这是你的url路径
      [process.env.VUE_APP_BASE_API_wlw]: {
        target: "http://xjz.202166.com",//这是在页面中要访问的服务。
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API_wlw]: "/"
        }
      },
    },

下面VUE_APP_BASE_API_wlw给他定义一个名称，wlwapi是你本地用的

# 开发环境配置
ENV = 'development'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# url根路径
VUE_APP_BASE_API_wlw = "/wlwapi"

然后下一步新建一个request.js文件，然后创建一个新实例，

然后在调用JS接口文件引入上面的请求JS文件。

import requestwlw from "@/utils/requestwlw";
// 物联网接口
export function wlwInfo(query) {
  return requestwlw({
    url: `/departww/queryDevicexjzsix`,
    method: "post",
    data: query
  });
}

使用时就可以把接口的方法引入到你调用的页面，使用就可以了。
如果部署到线上的话，就往下看，
注意：项目打包时，config.js里面的文件不会被打包。
刚才我们在前面用到了根路径（wlwapi这就是个前缀），现在就是再写一个线上使用的名字（wlwWorkP）

# 生产环境配置
ENV = 'production'
# url根路径
VUE_APP_BASE_API_wlw = "/wlwWorkP"

下面打包好以后，部署到相关服务上面，在你部署项目的外部文件有一个conf文件夹，在文件夹里找到ngix文件，找到你的配置

 server {
        listen       80;
        location / {
            root   html;//这是项目入口夹，就是上面用红线标注的。
            index  index.html index.htm;// 这是打包后的文件
        }
        }
        

    location /wlwWorkP/ {
            proxy_pass   http://xjz.202166.com/;#代理所有wlwWorlp开头的请求
            proxy_connect_timeout 60;
            proxy_read_timeout 60;
            proxy_send_timeout 60;
        }

然后保存文件，打开命令窗，Nigx -s reload,就是重启一下就可以了。
然后打开线上地址，找到跨域的接口处，看一下请求地址。

如有不对之处，请大家指正。谢谢。