配置的config/index.js
 
 proxyTable: {
      '/apia':{
        target:'https://api.caiyunapp.com',//目标接口域名
        changeOrigin: true,//是否跨域
        pathRewrite:{
          '^/apia': ''//重写接口,后面可以使重写的新路径，一般不做更改
        }
      },
      '/api': {
          target: 'http://127.0.0.1:8081',
          changeOrigin: true,
          pathRewrite: {
            '^/api': '/'
          }
      }
    },
 
第一个是第三方接口，能够正常访问，第二个是我的后端程序，访问时报404错误
 
 然后我尝试了从后端解决
 在springboot的controller前面加了
 
@CrossOrigin(origins= {"http://127.0.0.1:8080"},maxAge=3600)
 
然而，仍然报错，
 采用了filter解决
 
package per.czt.onlineshop.filter;

import java.io.File;
import java.io.FileFilter;
import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;
//@Component
public class CrosFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
		System.out.println("CrosFilter");

	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		HttpServletResponse res = (HttpServletResponse) response;
		res.setHeader("Access-Control-Allow-Origin", "*");
		res.setHeader("Access-Control-Allow-Credentials", "true");
		res.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
		res.setHeader("Access-Control-Max-Age", "3600");
		res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
		chain.doFilter(request, response);
		// TODO Auto-generated method stub

	}

	@Override
	public void destroy() {
		// TODO Auto-generated method stub

	}

}

 
还是报错，
 最后，从网上查了好的，都没有解决，最后有位朋友的博客中说如果后端错误，proxytable是无效的
 我尝试了一下后端访问，结果
 
 为什么后端访问不到url那？我又查阅了一些资料
 我今天在整合mongodb时候配置了一个@SpringBootApplication(scanBasePackageClasses= {com.mongodb.MongoClient.class})(不加也行的)
 scanBasePackageClasses扫描不到controller包，导致无法访问url，项目却能够启动，然后删除了这个注解，问题解决
 
 错误原因：没有充分了解springboot的注解的原理，以后应该加强框架底层原理的学习

在vue前端设置跨域时，有时会需要设置两个跨域，因为后台接口是2个不一样的ip或端口
 那么此时要注意，这两个跨域名称要设置成不重合的
 比如：
 
 请不要设置成这样：
 
 因为后面的名称的起始处包含了前面那个名称，会导致先匹配到前面去，整个后面那个设置就乱了，因为这是正则匹配。

讲真，这玩意可把我整累了。
 
Vue端配置
 vue.config.js下添加
 
module.exports = {
	devServer: {
		proxy: {																						// 跨域配置
			'/api': {
				target: 'http://127.0.0.1:8000',
				ws: true,
				changeOrigin: true,							
				pathRewrite: {																	// 路径重写
					'^/api': '/http://127.0.0.1:8000',
					'^/app01': '/http://127.0.0.1:8000/app01',
				}
			}
		}
	}
}
 
Django3端配置
 安装django-cors-headers包
 
pip install django-cors-headers
 
settings.py下配置
 
INSTALLED_APPS = [
    ......
    'corsheaders',
    ......
]

MIDDLEWARE = [
    ......
    'corsheaders.middleware.CorsMiddleware',			# 注意顺序
    'django.middleware.common.CommonMiddleware',		# 要添加的在其上
    ......
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

解决Vue3.0 跨域问题
 
当你的vue3.0和本地api服务器存在跨域可以使用此方法解决
 
main.js
 
//默认使用axios
Vue.prototype.$axios = axios
//更改axios默认路径，改为 /api 原因是要在vue.config.js里面配置
axios.default.baseURL='/api'
 
因为Vue3.0没有vue.config.js所以需要手动添加
 
 
在这个文件里面写跨域的字段
 
 devServer:{
        proxy:{
            '/api':{
                target:"http://localhost:3000/",//API服务器地址（更换为你的路径）
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
 
这样就可以在本地访问别的端口号的api接口