原则

跨域是因为请求url的主机与我们的来源不一致造成的，这通常被认为是非同源的。通过配置代理，我的请求变成了向192.168.1.109:8080请求数据(这是我的本地ip，请解释一下)，解决了非-的问题。

方法

//在根目录下自己创建vue.config.js

module.exports={

//cli3代理从指定目标的后面匹配，而不是从任何位置；配置路径重写可以替代

devServer: {

端口： '8080 '，

open: true，

proxy: {

/api': {

///api的含义是在axios中声明url以///API开头的所有请求都适用于此规则。

//注意以/api开头，即axios . post({ URL : '/API/XXX/XXX ' })

Target: '真实地址服务器'，

//这里target的意思是：跨域是访问引起的

//被请求的主机与我们请求头中的原点不一致，所以我们应该设置为一致。详情请见下文

changeOrigin: true，

路径重写： {'/API' :' https://我是服务器/api'}

//这是大多数文章都不会说清楚的地方。

//自从我们设置了代理之后，所有的请求URL都被写成了/api/xxx/xxx。请求如何知道我们请求的是哪个服务器数据？

//因此，这里的意义在于，如果您请求一个以/api开头的url，代理将知道您实际上应该在哪里请求它。

//‘我是服务器/api’，下面的/API是根据实际的请求地址确定的，也就是我的请求URL:/API/test/test，表示出来后的请求是

//https://我是服务器/API/测试/测试

}

}

}

}

Target是您想要表示的域名，必须添加http/https。

这里用“/api”代替目标中的地址，在组件中调用接口时直接用“/api”代替。比如我想叫‘https://xxx.com/news.直写’/API/news’

例子

解决跨领域的开发环境

在根目录下新建一个vue.config.js

module.exports={

devServer: {

//使用代理解决跨域问题

proxy: {

/api2': {

target : ' http://localhost :3000 '，

changeOrigin: true，

路径重写器： {'^/api2': ''}

},

/api': {

目标： 'http://39.97.33.178 '，

changeOrigin: true，

路径重写器： {'^/api': ''}

}

}

}

}

生成解决跨域问题的环境

要配置nginx，找到nginx配置文件nginx.conf，路径为/etc /etc/nginx/nginx.conf

服务器{

听8000；

server _ name localhost

# charset koi 8-r；

# access _ log logs/host . access . log main；

位置/api {

proxy _ pass https://www.baidu.com；#代理的域名

add_header“访问控制-允许-来源”“*”；

add_header“访问控制-允许-凭据”为“真”；

}

位置/

root/var/www/vue/；

index.htmlindex.htm指数；

}

}

https://www.baidu.com是我们想要代表域名

Add_header是添加一个返回头来解决跨域问题

注意：“/api”字符串应该添加在vue项目中请求的域名前面。请求示例如下

test . post('/API/product/GetDATa '，params)