Web开发跨域问题解决方案——前端Vue、前端JQuery、后端Java、PHP、其他

前端Vue(axios)解决方案

vue/cli 3+
项目根目录下(不是src目录下)新建文件 “vue.config.js”

后端接口例子（user相关接口）：
https://127.0.0.1:5555/user/login
https://127.0.0.1:5555/user/register
https://127.0.0.1:5555/user/getuserinfo

// vue.config.js
// 实现原理：代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://127.0.0.1:5555', // 你的服务端请求地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 重写url，将url中的 '/api' 替换掉
        }
      }
    }
  }
};

// axios
const baseUrl = https://127.0.0.1:6666 // 生产环境url
// 将开发环境的 'baseUrl' 设置为 '/api'
axios.defaults.baseURL = process.env.NODE_ENV === "production" ? baseUrl : "/api"
// 调用接口
axios({
	url: '/user/login' // '/user/register'  '/user/getuserinfo',
	// .... 其他配置
}).then(res => {
	console.log(res)
})

前端JQuery+后端解决方案

JQuery 解决方案主要是通过jsonp方式，需要结合后端实现

• 前端

$.ajax({
	type: 'get',
	url: 'https://127.0.0.1:5555/user/getuserinfo',
	dataType: 'JSONP',
	jsonpCallback: 'callback_string', // callback字符串，不设置则随机
	success: function(res){
		console.log(res)
	},
	error: function(err){
		console.error(err)
	}
})

• 后端(Java-SpringMVC)

返回的数据用callback包裹

// UserController
public String getUserInfo(String username, String callback) throws IOException {
    ObjectMapper objectMapper = new ObjectMapper();
    String jsonData = objectMapper.writeValueAsString(userService.getUserInfo(username));
    String jsonpData = callback + "(" + jsonData + ")";
    return jsonpData;
}

Java后端解决方案

// Java-SpringBoot
@Order(Ordered.HIGHEST_PRECEDENCE)
@Configuration
public class GlobalCorsConfiguration implements Filter {
    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        // 配置 "*" 无效的话，就填写指定地址（报错是因为不允许用 "*" 配置）
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,PUT,DELETE,PATCH,HEAD");
        response.setHeader("Access-Control-Allow-Max-Age","3600");
        response.setHeader("Access-Control-Allow-Headers","authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type");
        if("OPTIONS".equalsIgnoreCase(request.getMethod())){
            response.setStatus(HttpServletResponse.SC_OK);
        }else{
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }

    @Override
    public void destroy() {

    }
}

PHP后端解决方案

// 设置能访问的域名
static public $originarr = [
   'https://127.0.0.1:5555',
   'https://127.0.0.1:6666',
];
 
/**
 *  公共方法调用
 */
static public function setheader()
{
   // 获取当前跨域域名
   $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
   if (in_array($origin, self::$originarr)) {
      // 允许 $originarr 数组内的 域名跨域访问
      header('Access-Control-Allow-Origin:' . $origin);
      // 响应类型
      header('Access-Control-Allow-Methods:POST,GET');
      // 带 cookie 的跨域访问
      header('Access-Control-Allow-Credentials: true');
      // 响应头设置
      header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
   }
}

后端其他解决方案

后端解决方案实质就是设置响应头，以实现跨域访问
其他后端语言解决方案类似以上java、php解决方案

写在最后

欢迎留言、私信、讨论；
文章有知识性错误请立马联系博主，博主将非常感谢；
无需经过允许即可随意使用转载，知识本来就是被广泛用来学习的；
非常感谢您能看到此处，本文为博主学习笔记，如有不同见解，请不吝赐教。