解决vue跨域问题

了解跨域

什么是跨域

说到这块就有一个点需要知道：同源策略。

什么是同源策略：就是因为Ajax安全的考虑，不允许访问不同域名下的资源即所谓的同源测略的意思。

跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样，凡是发送请求的url的 协议、域名、端口号三者之间任意一者与当前页面地址不同的请求。这里的域指的是这样的一个概念：我们认为若协议 + 域名 + 端口号均相同，那么就是同域。

产生跨域的原因

产生跨域的情况有：不同协议，不同域名，不同端口以及域名和IP地址的访问

解决方案

跨域的解决方案目前有三种主流的解决方案

JSONP

实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收，经过后端数据处理，然后返回callback函数调用的形式，callback中的参数就是json。

proxy代理

实现原理：我在vue中使用vue.config,js里面配置一个proxy，里面有个target属性指向跨域链接，修改完后重启项目即可。

CORS

CORS全称跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求。

我们在这里是使用代理的方式结合.env文件来实现。

.env文件配置

普通文件就可以交.env，可以配置多个。 我在这里使用的是axios请求和vue框架。

文件内容：

VUE_APP_SERVER_URL='http://localhost:3000/'
//这里配置的公共路由
VUE_APP_BASE_URL='/api'
//代理名称

config文件配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_URL]: {
        target: process.env.VUE_APP_SERVER_URL,
        ws: true,
        changeOrigin: true,
        pathRewrite: { ["^" + process.env.VUE_APP_BASE_URL]: "" },
      },
    },
  },
});
//process.env.VUE_APP_BASE_URL替换掉axios中的baseUrl

一定记得重启项目

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    //默认启动
    "serve:prod": "vue-cli-service serve --mode production",
    //指定启动，启动方式就是npm run serve:prod必须加后缀。
    //production是.env文件的后缀，如.env.production
    "build": "vue-cli-service build"
  },

然后重新启动项目就行了。