前端如何实现跨域

在这个项目中。我需要使用外部的股票API来获取近期股票数据生成折线图。

在开发环境中实现跨域

在vue2项目的根文件目录下创建vue.config.js文件，在文件中输入以下代码开启代理服务器

module.exports={
  devServer: {
    // 使用代理服务器来解决跨域问题
    proxy: {
      "/api":{          // 代表请求路径以api开头的就将代理请求到 http://localhost:3000
        target: 'url',  // 这个是填写跨域的请求域名+端口号，也就是要请求的URL(不包含URL路径)
        changeOrigin: true,  // 是否允许跨域请求，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {   // 路径重写
            '^/api/': '' // 替换target中的请求地址，原请求为 http://127.0.0.1:8000/kuayu 实际请求为 http://127.0.0.1:8000/proxy_url/kuayu  
        }
      }
    }
  }

然后就能在项目中使用外部链接而不产生跨域问题了

 this.$axios({
        method: "get",
        url: `/api/hszbl/fsjy`, // 接口地址
      })

此时vue开启的代理服务器匹配到以/api开头的请求链接会在代理服务器中发生请求到真实的url地址获取数据，也就是上面配置的target中的地址，然后返回数据。

需要注意的是此时的配置仅仅在生产环境中有效，因为它是由webpack-dev-server提供的一个功能，在生产环境中没有这个服务。

在生产环境中实现跨域

要在生产环境中实现跨域，需要通过配置Nginx开启代理服务器

	location /api/ {
            proxy_pass 需要发起请求的url，也就是前文proxy配置中的target配置项，不需要加引号;
        }

此时就完成了在生产环境中实现跨域了