大家好，又见面了，我是你们的朋友全栈君。
vue跨域解决的几种方案
一、开发环境解决跨域方法
平时使用vue开发的时候，大多会使用vue-cli搭建项目，在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行相应的配置解决开发环境的跨域问题。 第一步设置公共url
api/index.js
代码语言：javascript复制import axios from 'axios'
import router from '@/router/index.js'
import store from '@/store/index.js'
// 创建一个axios实例
var instance = axios.create({
baseURL: "/api",
})
// 请求拦截器
instance.interceptors.request.use(function (config) {
config.headers['E_Token'] = store.state.user.E_Token;
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
})
// 响应拦截
instance.interceptors.response.use(function (config) {
if(config.data.retCode !=0){
// 处理后台异常
return false;
}
return config;
}, function (error) {
return Promise.reject(error)
})
export default function (method, url, data = null) {
method = method.toLowerCase();
if (method == 'post') {
return instance.post(url, data)
} else if (method == 'get') {
return instance.get(url, data)
} else if (method == 'delete') {
return instance.delete(url, data)
} else if (method == 'put') {
return instance.put(url, data)
} else {
console.error('未知的method' method)
return false
}
}api/modules/pagesApi.js
代码语言：javascript复制import req from '../index'
//用户注册接口
export const register =(params)=>{
return req("post", '/user/register', params)
}
//用户登录接口
export const login =(params)=>{
return req("post", '/user/login', params)
}
//Model列表及分页
export const getFormList =(params)=>{
return req("post", '/model/getFormList', params)
}
//查看详情
export const queryModel =(params)=>{
return req("get", '/model/queryModel/' params.id,{
})
}
//Model删除接口
export const deleteModel =(params)=>{
return req("delete", '/model/deleteModel/' params.id,{
})
}
//Model新增
export const insertModel =(params)=>{
return req("post", '/model/insertModel', params)
}通过拦截器我们可以更加容易的与后台进行交互，同时简洁了代码，使得管理更加容易，我们创建拦截器的时候可以指定baseUrl，这里我指定的是**”/api”,因为接下来我们需要对“/api”进行拦截配置，目的是凡是以“/api”开头的请求url都会将url中的“/api”**的前面添加上我们指定的内容。 例如：
代码语言：javascript复制'/api/user/login' 替换成 'http://119.20.224.137:8201/api/user/login'vue.config.js
代码语言：javascript复制devServer: {
// 1.指定服务的ip
host: "192.168.0.128",
// 2.指定服务的端口
port: 3000,
open: true,
overlay: {
warnings: false,
errors: true
},
// 3.开发环境进行http的代理
proxy: {
// 匹配 url 路径的开头
'/api': {
// 1.路劲只要是/api开头的url都代理到下面这个网站。
// 例如：'/api/xxxx' 会代理到 https://119.20.224.137/api/xxxx
target: 'http://119.20.224.137:8201',
changeOrigin: true,
pathRewrite: { '^/api': '/api/' }
}
}
},二、生产环境解决跨域方法
配置nginx代理
使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：
代码语言：javascript复制location / {
root D:/browseClient/dist; #自己的前端项目地址
index index.html index.htm;
}
#解决跨域
location /api {
# 自定义nginx接口前缀
proxy_pass http://127.0.0.1:3000; # 后台api接口地址
proxy_redirect default;
#设置主机头和客户端真实地址，以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}三，后端处理
代码语言：javascript复制 response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u prefer
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187176.html原文链接：https://javaforall.cn
