vue项目开发环境和生产环境代理的配置问题

1.跨域

跨域解决方案：
1.JSONP 通过动态 script标签跨域
2.document.domain + iframe跨域
3.location.hash + iframe
4.window.name + iframe跨域
5.postMessage 跨 window 通信
6.跨域资源共享（CORS）
7.nginx代理跨域
8.nodejs中间件代理跨域
9.WebSocket协议跨域
10.Vue CLI proxy 代理跨域（vue.config,js配置）

​ 2.开发环境

1.在开发环境中，可以在根目录中创建一个vue.config.js进行代理的配置：

module.exports = {
  publicPath: './',
  // 开发服务器
  devServer: {
    port: 8080, // 修改启动端口号
    proxy: {
      '/proxy_url': { // 请求相对路径以 /user 开头的，才会走这里的配置
        target: process.env.VUE_APP_BASE_API, // 这个就是后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/proxy_url': ''
        }
      }
    }
  },
}

devServer 是npm run dev时生效的，用于开发环境。

打包时用的是生产环境，不会用devServer的配置。

devServer的配置主要针对vue项目本地开发环境时的跨域代理配置；当vue前端项目打包部署后，会成为单独的静态资源，前端框架中所配置服务器跨域代理将不起作用；资源要被访问，那必然还是需要有另一个 web 服务器来装载它，这个服务器常见的就是nginx。

a.使用 webpack-dev-server (下简称wds) 进行开发时，wds 启动了一个运行在 node 上的 web 服务器，此时开发环境访问对应的端口时 (以 8080 举例) ，浏览器返回的 vue 页面是 wds 处理后的结果。
b.跨域。简单来说，在使用 ajax 请求与当前页面不同来源的数据时，浏览器会拦截服务器发回的响应。在开发环境下，“当前来源”就是 http://127.0.0.1:8080，向任何其它地址或端口的请求都会被视作跨域，从而被浏览器拦截。
c.devServer 的 proxy 是为了简化开发环境下的跨域请求配置。在上述情景中，注意被拦截的是发往“其它来源”的请求，而发往“当前来源”的不会被拦截，此处的“当前来源”则是作为开发服务器的 wds。wds 的思路就是基于此的，当发现符合在 devServer proxy 中配置好的请求格式时，将该请求拦截下来，由自己去请求服务器获取响应，然后把该响应返回给前端页面，即相当于一个传话筒。

编译打包后，前端页面成为了单独的静态资源，wds 被抽离出去了。但是资源要被访问，那必然还是需要有另一个 web 服务器来装载它，这个服务器常见的就是 nginx。所以，如果想要让线上的 vue 页面也能正常访问服务器，那么只需要配置 nginx，告诉它同样的事，即“当我访问某个 url 时，由你来做实际的请求，然后把结果告诉我”。
2. JSONP：如果后端支持 JSONP 跨域请求，可以使用 Vue 中的 JSONP 库（如 vue-jsonp）来发送跨域请求。
3. CORS：后端服务在响应中设置合适的 CORS 头部信息，允许特定的源（包括端口和协议）访问该接口。在 Vue 中直接发起跨域请求，由后端处理跨域问题。
4. WebSocket：如果需要在 Vue 中与支持 WebSocket 的服务器进行跨域通信，可以使用 WebSocket API 进行连接和通信。WebSocket 不受同源策略的限制。
WebSocket协议

需要注意的是，以上方法适用于开发环境下解决跨域问题。在生产环境中，应该由后端配置合适的跨域策略，以确保安全性。

3.生产环境

在生产环境中，前端解决跨域问题的方法有限，因为浏览器的同源策略限制了跨域访问。以下是一些可行的方法：

1.通过后端代理：在生产环境中，可以通过后端服务器进行跨域请求。前端将请求发送到同域下的后端接口，然后后端服务器再代理到目标接口。这样前端请求就遵循同源策略，不会产生跨域问题。

2.CORS（跨域资源共享）：如果你有权限控制后端接口，可以在后端设置 CORS 头部信息，允许特定的源（包括端口和协议）访问该接口。通过在响应中设置合适的 CORS 头部，浏览器将允许前端跨域访问。
跨域及cors解决跨域

3.JSONP（仅限于 GET 请求）：如果后端支持 JSONP，可以使用 JSONP 来进行跨域请求。JSONP 利用了 script标签不受同源策略限制的特性，在前端动态创建 script>标签来请求跨域接口。
jsonp原理及应用

需要注意的是，在生产环境中，由于安全性和跨域限制的考虑，应该限制跨域请求的源和目标，避免不必要的安全风险。请与后端开发人员合作，并根据具体需求和安全策略选择合适的解决方案。

4.nginx反向代理： Nginx 可以作为反向代理服务器，接收客户端的请求，并将请求转发到后端的真实服务器上。通过反向代理，可以实现负载均衡、缓存加速、SSL 终端、安全过滤等功能。www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口www.baidu.com/server.php，由这个接口在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html