【前端】 CORS 跨域问题 （“No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.”）

1.服务端配置Access-Control-Allow-Origin 设置为 “*” 代表 允许所有 都可跨域访问

设置请求头 允许跨域

 @Override  
    public void doFilter(ServletRequest req, ServletResponse res,  
            FilterChain chain) throws IOException, ServletException {  
            HttpServletResponse response = (HttpServletResponse) res;  
            response.setHeader("Access-Control-Allow-Origin", "*");  //允许所有来源访问
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  //允许访问的方式  
            response.setHeader("Access-Control-Max-Age", "3600"); // 超时时长
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); // 自定义的头信息
            chain.doFilter(req, res);  
          
    } 

2. JQuery 前端

添加 dataType: 'jsonp'

jQuery.ajax({
        type: "post",
        url: url,
        dataType: "jsonp",
        jsonp: 'callBack',
        success: function(result) {}
})

3. axios 前端

设置代理

找到config/index.js,在dev（本地）中添加  或者 build（打包线上）中 添加 如下代码

    // proxyTable: {
    //   '/api': { //进入重新的名称
    //     target: 'http://192.168.1.217:8083/', // 服务端接口地址
    //     changeOrigin: true, // 是否允许跨越
    //     pathRewrite: {
    //       '^/api': '' // 重写,
    //     }
    //   },
    // },

使用 以 /api 开头 则会进入proxyTable

  axios.post('/api/crm/appendix/postfile', formdata)
        .then(res => {
          success(
            res.data.data
          )
        })
        .catch(res => {
          failure('error')
        })

4. el-element  upload 上传图片 CORS 跨域问题

4.1 config/index 设置代理  参考（axios 设置代理）

4.2  action 参数前加上 进入代理关键词  范例：action: '/api/upload'  此处不加域名 ip 

（注意：需要根据环境判断是否是开发环境再加上  /api ）

4.3  如服务端设置字段名为 files   需设置 name: 'files'

4.4  headers 设置请求头 如：登录token