标签： 服务器端

跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port，例如：
– ‘192.168.1.1:8080’ 与 ‘192.168.1.2:8080’是不同的域。
– ‘192.168.1.1:8080’ 与 ‘192.168.1.1:8081’是不同的域。

解决此类问题的方法很多，有需要客户端和服务端都要更改的，例如jsonp，iframe等等；有只需要客户端更改的，这种情况只能出现在hybrid app开发中，即通过调用native方法来进行网络请求；有只需要服务端配置的，下面介绍3种服务端配置的方法。

*种

如果您使用的mvc框架是spring4.2以上的话，一个@CrossOrigin就可以搞定。将@CrossOrigin加到Controller上，那么这个Controller所有的请求都是支持跨域的，代码如下：

1. @Controller
2. @CrossOrigin
3. public class GreetingController {

• 1
• 2
• 3

• 1
• 2
• 3

将@CrossOrigin加到请求方法上，那么这个请求是支持跨域的，代码如下

1. @CrossOrigin
2. @RequestMapping(“/greeting”)
3. public @ResponseBody Greeting greeting(@RequestParam(required=false, defaultValue=“World”) String name) {

• 1
• 2
• 3

• 1
• 2
• 3

更详细的@CrossOrigin介绍，请参看这里

第二种

全局配置，也需要spring4.2以上。

1. @Bean
2. public WebMvcConfigurer corsConfigurer() {
3. return new WebMvcConfigurerAdapter() {
4. @Override
5. public void addCorsMappings(CorsRegistry registry) {
6. registry.addMapping(“/greeting-javaconfig”).allowedOrigins(“http://localhost:9000”);
7. }
8. };
9. }

.addCorsMappings()中的参数代表支持跨域的url，.allowedOrigins()中的参数代表可以访问该接口的域名，设置为”*”可支持所有域。

第三种

这种方法就跟框架无关了，需要两个jar包，点击这里进行下载，两个jar包可以放的程序里，也可以放到tomcat中，然后将下面的配置写到web.xml中就可以了

1. < filter >
3. < filter-name > CORS </ filter-name >
5. < filter-class > com.thetransactioncompany.cors.CORSFilter </ filter-class >
7. < init-param >
9. < param-name > cors.allowOrigin </ param-name > <!–配置授信的白名单的域名！–>
11. < param-value > * </ param-value >
13. </ init-param >
15. < init-param >
17. < param-name > cors.supportedMethods </ param-name >
19. < param-value > GET, POST, HEAD, PUT, DELETE </ param-value >
21. </ init-param >
23. < init-param >
25. < param-name > cors.supportedHeaders </ param-name >
27. < param-value > Accept, Origin, X-Requested-With, Content-Type, Last-Modified </ param-value >
29. </ init-param >
31. < init-param >
33. < param-name > cors.exposedHeaders </ param-name >
35. < param-value > Set-Cookie </ param-value >
37. </ init-param >
39. < init-param >
41. < param-name > cors.supportsCredentials </ param-name >
43. < param-value > true </ param-value >
45. </ init-param >
47. </ filter >
49. < filter-mapping >
51. < filter-name > CORS </ filter-name >
53. < url-pattern > /* </ url-pattern >
55. </ filter-mapping >

上传文件到服务器有很多插件，而且各种UI组件库,像iview,eleUI也都替我们封装好了，根本不用我们操心。
下面是原生的form 上传
原生form表单上传文件
直接上代码

<form enctype=’multipart/form-data’ action=”http://192.168。xxx.xxx:3000/upload” method=”post”>
<input type=”file” name=’pic’>
<input type=”submit”>
</form >

首先我们看form的enctype 属性
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码，但是在这里上传文件，我们用multipart/form-data，通过二进制方式提交。

action是你上传文件的地址路径，method是以什么方式进行处理，post为上传，get为获取。
前端很简单，重要的是后端，博主用node起了一个服务器，废话不说，上代码

var multiparty = require(‘multiparty’)

router.post(‘/upload’,function (req,res) {
//创建处理form表单的对象
var form = new multiparty.Form({
uploadDir: ‘./images’
})//文件上传的路径
//通过form.parse生成服务器文件，注意这里生成的文件名字不是原来的名字，而是编码后的名字,里面的回调包含错误信息，字段信息，文件信息
form.parse(req,function (err,fields,files) {
if(err) {throw err ;
console.log(err)}
else{
res.send(JSON.stringify(files.pic[0]))
}
})
})

这里需要安装插件multiparty
执行命令npm i multiparty
作用：使用内容类型解析http请求multipart/form-data，也称为文件上载。