java后台解决跨域访问,为什么前端还不能访问上传文件 5C
 function upload() {
    var form1 = document.createElement("form");
    form1.setAttribute("id","form1");
    document.body.appendChild(form1)
    var inputObj=document.createElement('input')
    inputObj.setAttribute('id','file');
    inputObj.setAttribute('type','file');
    inputObj.setAttribute('name','file');
    inputObj.setAttribute("style",'visibility:hidden');
    inputObj.click()
    form1.appendChild(inputObj)
    inputObj.onchange = function () {
        form1.method ="POST";
        form1.enctype = "multipart/form-data";
        $("#form1").submit(function () {
             var formData = new FormData();
             formData.append("file",$("#file")[0]);
            $.ajax({
                url:"http://localhost:8080/file/upload.action",
                type:"POST",
                contentType:"multipart/form-data",
                data:formData,
                cache:false,
                processData:false,
                success:function (data) {
                    console.log(data)
                }
            })
        })

    }
}

如上代码,html为了美观只用了一个button,button点击后调用这个函数,然后用js创建form表单和input,这里问题来了:如果单单表单提交,没有问题,但是会跳转页面;如果单单用ajax,出现跨域(服务器端已经添加了header还是会有跨域问题),
再就是使用如上的代码,form表单中使用ajax请求,没有出现任何问题并且文件没有上传,好像是 $("#form1").submit(function () )没有调用,小白求解。

4个回答

$("#form1").submit(function () ) 你把这个去掉试试
这一步貌似多余

需要后端设置相关参数;
具体可以参考下cros 跨域;
spring boot 项目中:
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter{

@Value("${allowed.origins}")
private String allowedArigins;

public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/file/**").allowedOrigins(allowedArigins.split(","))
            .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
            .allowCredentials(false).maxAge(3600);
}

}

这个html文件ajax调用代码要放在服务器http://localhost:8080/的目录下运行。浏览器的地址栏路径类似:http://localhost这样开头的。

你这formData传的什么东西,,,,,

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐